二.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实例 ...
随机推荐
- 前端入门8-JavaScript语法之数据类型和变量
声明 本系列文章内容全部梳理自以下几个来源: <JavaScript权威指南> MDN web docs Github:smyhvae/web Github:goddyZhao/Trans ...
- canvas-9NonZeroAroundPrinciples.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 如何用ABP框架快速完成项目(3) - 为什么要使用ABP和ABP框架简介
首先先讲为什么要使用ABP? 当然是因为使用ABP可以快速完成项目啦. 时间就是金钱, 效率就是生命嘛 有了ABP, 你就节省了写如下模块的时间: CRUD数据库基本操作 校验 异常处理 日志 权 ...
- 从头开始：详解MVVM、MVVMLight
究竟为什么要学习MVVM? 相信大部分同学在刚开始接触MVVM的时候(包括我自己),心里默默在想这究竟是什么玩意?一个简单的功能要写一大段代码才能完成,在看到MVVM的核心目标: 1.让UI界面与逻辑 ...
- WPF窗体程序入口 自定义窗体启动页面
一张图体现一切:
- Javascript数组系列二之迭代方法1
我们在<Javascript数组系列一之栈与队列 >中介绍了一些数组的用法.比如:数组如何表现的和「栈」一样,用什么方法表现的和「队列」一样等等一些方法,因为 Javascript 中的数 ...
- VS调试IDAPython脚本
本文最后修改时间:20180213 1.安装VS插件PTVS , 这一步与第2步中安装版本应该一致,否则最后调试时会连不上 https://github.com/Microsoft/PTVS/ 2.安 ...
- 使用Visual Studio Team Services持续集成（三）——使用工件
使用Visual Studio Team Services持续集成(三)--使用工件 工件是应用程序的可部署组件.Visual Studio Team Services有能力在构建过程中显式地管理工件 ...
- 自动化测试基础篇--Selenium文件上传send_keys
摘自https://www.cnblogs.com/sanzangTst/p/8358165.html 文件上传是web页面上很常见的一个功能,自动化成功中操作起来却不是那么简单. 一般分两个场景:一 ...
- mysql 数据库 命令行的操作——对表和字段的操作
一.对表的操作 1.查看所有表 show tables: 2.创建表 create table 表名(字段1 类型1 约束1 ,字段2 类型2 约束2): 3.修改表的名字 rename table ...