二.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实例 ...
随机推荐
- 为啥JQuery被淘汰了？
摘要: 技术进步永不止步. 原文:jQuery的没落和技术发展的一般规律 作者:凌霄光 Fundebug经授权转载,版权归原作者所有. jQuery的成就 jQuery是一个伟大的库, 它解决了dom ...
- POJ 2478Farey Sequence
Farey Sequence Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 17744 Accepted: 7109 D ...
- [CSS] 点击事件触发的动画
源码 https://github.com/YouXianMing/CSS-Animations/tree/master/Event 效果 细节 1) 一个完整的可回溯的动画至少包括了两种状态,以及两 ...
- Loadrunner 脚本优化-事务函数简介
脚本优化-事务函数简介 by:授客 QQ:1033553122 1.事务的开始和结束名称需要相同 lr_start_transaction(“transaction_name”); …//事务处理 l ...
- DAY3(PYTHON)字符串切片
字符串调整: capitalize() #首字母大写 upper() #全大写 lower() #全小写 swapcase() #大小写翻转 字符串切片: 顾头不顾尾!!! ...
- ajax请求经典格式
$.ajax({ url: url, type: "POST", dataType: "json", data: data, success: funtion1 ...
- Spark操作HBase报:org.apache.hadoop.hbase.client.RetriesExhaustedWithDetailsException异常解决方案
一.异常信息 19/03/21 15:01:52 WARN scheduler.TaskSetManager: Lost task 4.0 in stage 21.0 (TID 14640, hnte ...
- Hive内部表与外部表的区别
1.未被external修饰的是内部表[managed table],被external修饰的为外部表[external table]. 2.内部表数据由Hive自身管理,外部表数据由HDFS管理. ...
- Azure SQL Virtual Machine报Login failed for user 'NT Service\SqlIaaSExtension'. Reason: Could not find a login matching the name provided
在一台位于HK的Azure SQL Virtual Machine上修改排序规则,重建系统数据库后,监控发现大量的登录失败告警生成,如下所示: DESCRIPTION: Login failed f ...
- Q2Day81
性能相关 在编写爬虫时,性能的消耗主要在IO请求中,当单进程单线程模式下请求URL时必然会引起等待,从而使得请求整体变慢. import requests def fetch_async(url): ...