二.css介绍
一.三种引入样式
1.内嵌样式：写在html中 style标签里面
2.行内样式：写在具体的标签的style属性
3.引入外部样式表：可以将样式规则写在外部文件，再引入到html中
<link type="text/css" rel="stylesheet" href="../css/theme.css">
二.样式选择器
1.html选择器：该样式规则的名字和html标签一致，作用域当前网页中的该标签
2.类选择器：每个标签都可以写一个class属性，其样式规则就是.+类名{样式规则}
3.id选择器：每个标签都可以写一个id属性，其样式规则就是#+id名{样式规则}
例子：
图片文件
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>新疆旅游网</title>
<link type="text/css" rel="stylesheet" href="css.css"/>
</head>
<body>
<!--整个外层的页面容器-->
<div id="container">
<!--banner条-->
<div id="banner"><img src="data:images/banner.jpg"/></div>
<!--全局导航菜单模块-->
<div id="globallink">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新疆简介</a></li>
<li><a href="#">风土人情</a></li>
<li><a href="#">吃在新疆</a></li>
<li><a href="#">路线选择</a></li>
<li><a href="#">自助行</a></li>
<li><a href="#">摄影摄像</a></li>
<li><a href="#">游记精选</a></li>
<li><a href="#">资源下载</a></li>
<li><a href="#">雁过留声</a></li>
</ul>
</div>
<!--左边模块-->
<div id="left">
<div id="weather">
<h3><span>天气查询</span></h3>
<ul>
<li>乌鲁木齐 雷阵雨 20℃-31℃</li>
<li>吐鲁番 多云转阴 20℃-28℃</li>
<li>喀什 阵雨转多云 25℃-32℃</li>
<li>库尔勒 阵雨转阴 21℃-28℃</li>
<li>克拉马依 雷阵雨 26℃-30℃</li>
</ul>
</div>
<div id="today">
<h3><span>今日推荐</span></h3>
<ul>
<li><a href="#"><img src="data:images/tuijian1.jpg"></a></li>
<li><a href="#">喀纳斯河</a></li>
<li><a href="#"><img src="data:images/tuijian2.jpg"></a></li>
<li><a href="#">布尔津</a></li>
<li><a href="#"><img src="data:images/tuijian3.jpg"></a></li>
<li><a href="#">天山之路</a></li>
</ul>
</div>
</div>
<!--中间模块-->
<div id="middle">
<div id="ghost"><a href="#" title="魔鬼城探秘"><img src="data:images/ghost.jpg" border="0"></a></div>
<div id="beauty">
<h3><span>美景寻踪</span></h3>
<ul>
<li><a href="#"><img src="data:images/beauty1.jpg"></a></li>
<li><a href="#"><img src="data:images/beauty2.jpg"></a></li>
<li><a href="#"><img src="data:images/beauty3.jpg"></a></li>
<li><a href="#"><img src="data:images/beauty4.jpg"></a></li>
</ul>
</div>
<div id="route">
<h3><span>线路精选</span></h3>
<ul>
<li><a href="#">吐鲁番——库尔勒——库车——塔中——和田——喀什</a></li>
<li><a href="#">乌鲁木齐——天池——克拉马依——乌伦古湖——喀纳斯</a></li>
<li><a href="#">乌鲁木齐——奎屯——乔尔玛——那拉提——巴音布鲁克</a></li>
<li><a href="#">乌鲁木齐——五彩城——将军隔壁——吉木萨尔</a></li>
</ul>
</div>
</div>
<!--右边模块-->
<div id="right">
<div id="map">
<h3><span>新疆风光</span></h3> <p><a href="#" title="点击看大图"><img src="data:images/map1.jpg"></a></p> <p><a href="#" title="点击看大图"><img src="data:images/map2.jpg"></a></p>
</div>
<div id="food">
<h3><span>小吃推荐</span></h3>
<ul>
<li><a href="#">17号抓饭</a></li>
<li><a href="#">大盘鸡</a></li>
<li><a href="#">五一夜市</a></li>
<li><a href="#">水果</a></li>
</ul>
</div>
<div id="life">
<h3><span>宾馆酒店</span></h3>
<ul>
<li><a href="#">美丽华大饭店</a></li>
<li><a href="#">海德大饭店</a></li>
<li><a href="#">银都大饭店</a></li>
<li><a href="#">鸿福大饭店</a></li>
<li><a href="#">友好大酒店</a></li>
<li><a href="#">棉麻宾馆</a></li>
<li><a href="#">电信宾馆</a></li>
</ul>
</div>
</div>
<!--脚注模块-->
<div id="footer">
<p>艾萨克 ©版权所有 <a href="mailto:demo@demo.com">demo@demo.com</a></p>
</div>
</div>
</body>
</html>
css.css
* {
padding: 0px;
margin: 0px
}
body {
background-color: #2286c6;
font-size: 12px;
font-family: Arial;
}
#container {
margin: 0px auto; /*使容器水平居中*/
width: 780px;
height: 600px;
background-color: #123456;
text-align: left;
}
#globallink ul {
list-style-type: none;
}
#globallink ul li {
float: left;
width: 78px;
text-align: center;
}
#globallink ul li a {
display: block;
padding: 9px 6px 11px 6px;
background: url("images/button1.jpg") no-repeat;
}
#globallink ul li a:link, #globallink ul li a:visited {
color: #004a87;
background: url("images/button1.jpg") no-repeat;
}
#globallink ul li a:hover {
color: #ffffff;
background: url("images/button1_bg.jpg") no-repeat;
text-decoration: none;
}
#left {
width: 200px;
background-color: #ffffff;
padding: 0px 0px 5px 0px;
color: #d8ecff;
float: left;
}
#weather {
background: url("images/weather.jpg") no-repeat -5px 0px;
margin: 0px 5px;
background-color: #5ea6eb;
}
#weather h3 {
padding: 24px 0px 0px 74px;
}
#weather ul {
list-style-type: none;
margin: 8px 5px 0px 5px;
padding: 10px 0px 8px 5px;
}
#weather ul li {
background: url("images/icon1.gif") no-repeat 0px 6px;
padding: 1px 0px 0px 10px;
}
#middle {
background-color: #ffffff;
width: 400px;
margin: 0px 2px;
padding: 5px 0px;
float: left;
}
#middle div {
margin: 0px 5px;
}
#middle h3 span {
display: none;
}
#beauty h3 {
background: url("images/picture_h1.gif") no-repeat;
height: 41px;
}
#route h3 {
background: url("images/route_h1.gif") no-repeat;
height: 41px;
clear: both;
}
#beauty ul, #route ul {
list-style-type: none;
margin: 15px 1px 12px 1px;
}
#beauty ul li {
float: left;
width: 97px;
text-align: center;
}
#beauty ul li img {
border: 1px solid #4ab0ff;
}
#route ul li {
background: url("images/icon1.gif") no-repeat 20px 7px;
padding: 3px 0px 0px 30px;
margin: 10px 0px 0px 0px;
}
#route ul li a:link, #route ul li a:visited {
color: #004e8a;
text-decoration: none;
}
#route ul li a:hover {
color: #000000;
text-decoration: underline;
}
#today h3 {
color: #003973;
background: url("images/icon2.gif") no-repeat 5px 7px;
background-color: #bbddff;
padding: 4px 0px 2px 15px;
margin: 0px 0px 5px 0px;
}
#today {
background-color: #5ea6eb;
margin: 0px 5px;
padding: 0px 0px 10px 0px;
}
#today ul {
list-style-type: none;
}
#today ul li {
text-align: center;
}
#today ul li img {
border: 1px solid #ffffff;
margin: 8px 0px 0px 0px;
}
#today ul li a:link, #today ul li a:visited {
color: #d8ecff;
text-decoration: none;
}
#today ul li a:hover {
color: #ffff00;
text-decoration: underline;
}
#right {
background-color: #ffffff;
width: 176px;
padding: 0px 0px 5px 0px;
float: left;
}
#right div {
margin: 0px 5px;
background-color: #5ea6eb;
}
#right div h3 {
background: url("images/icon2.gif") no-repeat 5px 15px;
padding: 10px 0px 10px 15px;
margin: 0px 0px 5px 0px;
background-color: #bbddff;
}
#map p {
text-align: center;
}
#map p img {
border: 1px solid #ffffff;
}
#food ul, #life ul {
list-style-type: none;
padding: 0px 0px 10px 0px;
margin: 18px 10px 0px 10px;
}
#food ul li, #life ul li {
background: url("images/icon1.gif") no-repeat 3px 9px;
padding: 3px 0px 4px 12px;
border-bottom: 1px dashed #eeeeee;
}
#food ul li a:link, #food ul li a:visited, #life ul li a:link, #life ul li a:visited {
color: #ffffff;
text-decoration: none;
}
#food ul li a:hover,#life ul li a:hover{
color: #000000;
text-decoration: underline;
}
#footer {
width: 100%;
height: 30px;
background-color: yellow;
margin: 1px 0px 0px 0px;
padding: 1px 0px;
clear: both;
}
#footer p{
text-align: center;
background-color: #5ea6eb;
padding: 8px 0px;
}
#footer p a{
color: #ffffff;
text-decoration: none;
}
二.css介绍的更多相关文章
- 前端之CSS介绍
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS的语法 CSS语 ...
- 前端 CSS 介绍
CSS介绍 我们为什么需要CSS? 使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离 在没有CSS之前,我们想要修改HTML标签的样式需要为每个HTML标签单独定义样 ...
- web前端知识大纲：系列二 css篇
web前端庞大而复杂的知识体系的组成:html.css和 javascript 二.css 1.CSS选择器 CSS选择器即通过某种规则来匹配相应的标签,并为其设置CSS样式,常用的有类选择器.标签选 ...
- 一、CSS介绍
CSS介绍 1.css概述: CSS指层叠样式表 CSS样式表极大地提高了工作效率 selector{ property:value } 注:property(属性)大于1之后,property之间用 ...
- 前端学习之路-CSS介绍，Html介绍，JavaScript介绍
CSS介绍 学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用css到html中呢? style属性方式 利用标签中的style属性来改变显示样式 & ...
- {Django基础九之中间件} 一 前戏 二 中间件介绍 三 自定义中间件 四 中间件的执行流程 五 中间件版登陆认证
Django基础九之中间件 本节目录 一 前戏 二 中间件介绍 三 自定义中间件 四 中间件的执行流程 五 中间件版登陆认证 六 xxx 七 xxx 八 xxx 一 前戏 我们在前面的课程中已经学会了 ...
- {MySQL数据库初识}一 数据库概述 二 MySQL介绍 三 MySQL的下载安装、简单应用及目录介绍 四 root用户密码设置及忘记密码的解决方案 五 修改字符集编码 六 初识sql语句
MySQL数据库初识 MySQL数据库 本节目录 一 数据库概述 二 MySQL介绍 三 MySQL的下载安装.简单应用及目录介绍 四 root用户密码设置及忘记密码的解决方案 五 修改字符集编码 六 ...
- {python--GIL锁}一 介绍 二 GIL介绍 三 GIL与Lock 四 GIL与多线程 五 多线程性能测试
python--GIL锁 GIL锁 本节目录 一 介绍 二 GIL介绍 三 GIL与Lock 四 GIL与多线程 五 多线程性能测试 一 背景知识 ''' 定义: In CPython, the gl ...
- 前端基础之css介绍
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 ...
随机推荐
- JS 操作svg画图
背景: 一共有3个文件:svg文件,html文件,js文件. 有一个svg图,使用embed标签,引入到了html文件中 svg文件: <svg width="640" he ...
- js 原生手写AJAX
前言:最近在学习react,在练习中模拟一个button通过AJAX向后台发送POST请求,懒得引入AXIOS,就顺便练习了js原生ajax. 正文: 注:我忽略了IE6及以下版本 submit(){ ...
- WORLD 目录排版调整
文本如下: ----------------------------------------------------------------- 前言1 简介2 我爱你3 圣灵丹方士大夫4 阿类似的看风 ...
- BZOJ3687: 简单题(dp+bitset)
Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 1138 Solved: 556[Submit][Status][Discuss] Descripti ...
- iOS ----------关于动画
这个网址上的内容很不错.https://github.com/ameizi/DevArticles/issues/91
- 基于Python实现的死链接自动化检测工具
基于Python实现的死链接自动化检测工具 by:授客 QQ:1033553122 测试环境: win7 python 3.3.2 chardet 2.3.0 脚本作用: 检测系统中访问异常(请求 ...
- javascript实现的浏览器下载文件
function download(src) { var $a = document.createElement('a'); $a.setAttribute("href", src ...
- java----java垃圾回收算法
1.引用计数法(Reference Counting Collector) 1.1算法分析 引用计数是垃圾收集器中的早期策略.在这种方法中,堆中每个对象实例都有一个引用计数.当一个对象被创建时,且将该 ...
- java一个数分解的质因数java
import java.util.Scanner; /** * Created by Admin on 2017/3/18. */ public class Test01 { public stati ...
- Spring基于注解注入的两种方式
1.@Autowried 1)默认基于类型查找容器的的Bean进行注入(注入的Bean的实现类是唯一的). 2)当实现类的Bean大于一个的时候,需结合@Qualifier,根据Bean的名称来指定需 ...