二.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实例 ...
随机推荐
- mapper代理查询
对于查询来说,要根据具体的业务,来指定mapper接口中方法的返回值类型1:如果只返回一条记录,mapper接口中方法的返回值类型应指定为pojo类型或其他简单类型,这样mybatis内部就会使用se ...
- 人类阅读的优越方式打印php数组
在程序开发过程中:打印数据进行查看调试是非常频繁的:如果没有一种易于阅读的样式那是相当痛苦的:先定义一个数组: $array=array( 't0'=>'test0', 't1'=>'te ...
- bootstrap网站后台从设计到开发
前言 毕业后在一家小公司找的工作是做前端,小公司必须要身兼多职,会多门技术,所以为了工作需要自学ps,做过微信运营,后来为了做erp管理系统,又开始学习c# ,之后公司有新项目要用wpf ,我又开始学 ...
- es6 语法 （iterator和for...of循环）
Iterator遍历器 遍历器(Iterator)就是这样一种机制.它是一种接口,为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署Iterator接口,就可以完成遍历操作(即依次处理该数据 ...
- 洛谷P4577 [FJOI2018]领导集团问题(dp 线段树合并)
题意 题目链接 Sol 首先不难想到一个dp,设\(f[i][j]\)表示\(i\)的子树内选择的最小值至少为\(j\)的最大个数 转移的时候维护一个后缀\(mx\)然后直接加 因为后缀max是单调不 ...
- Python 'xxx' codec can't decode byte xxx常见编码错
'xxx' codec can't decode byte xxx常见编码错误处理 by:授客 QQ:1033553122 测试环境 python 3.3.2 win7 问题描述 利用python文件 ...
- Loadrunner 脚本开发-利用web_submit_data函数实现POST请求
脚本开发-利用web_submit_data函数实现POST请求 by:授客 QQ:1033553122 概述 web_link()和web_url()函数都是页面访问型函数,实现HTTP请求中的 ...
- Python高级特性：迭代
迭代的目的是实现遍历出一个可迭代对象的元素,即for循环 基本语法 : for ... in ... 首先只有可迭代对象才可以迭代,判断一个对象是不是可以迭代的方法如下: >>> f ...
- 环信easeui集成：坑总结2018（二）
环信EaseUI 集成,集成不做描述,看文档即可,下面主要谈一些对easeui的个性化需求修改. 该篇文章将解决的问题: 1.如何发送视频功能 2.未完待续.. ------------------- ...
- Servlet以及单例设计模式
1.Servlet概述 a)Servlet,全城是Servlet Applet,服务器端小程序,是一个接口,定义了若干方法,要求所有的Servlet必须实现. b)Servlet用于接收客户端的请求, ...