二.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实例 ...
随机推荐
- react学习笔记2
1.build文件介绍 (1)react.js 是react的核心库 (2)react-dom.js 提供与DOM相关功能 (3)browser.js 是将JSX语法转为javascript语法 ...
- 洛谷P2866 [USACO06NOV]糟糕的一天Bad Hair Day(单调栈)
题目描述 Some of Farmer John's N cows (1 ≤ N ≤ 80,000) are having a bad hair day! Since each cow is self ...
- C#基础(204)--对象初始化器，基本数据类型与引用数据类型特点总结，ref，out关键字的使用
对象初始化器: 对象在创建过程中也可以使用对象初始化器完成“属性的初始化” Student stu =new Student(){ StudentId=, StudentName="张三&q ...
- C# 开启一个新进程并为新进程设置工作目录
Process p = new System.Diagnostics.Process(); //设置新进程的工作目录,如果不设置那么新进程的工作目录为开启这个进程的工作目录 p.StartInfo.W ...
- matlab练习程序（地图上画经纬度）
需要看下生成的数据在地球上的经纬度具体位置. 投影为墨卡托投影. clear all; close all; clc; load coast; a=load('out.txt'); %自己的经纬度 ...
- EasyUI动画效果
1.jQuery动画效果 a)基本效果 >show(speed),显示 >hide(speed),隐藏 >toggle(speed),切换 b)滑动的效果 >slideUp(s ...
- oracle11在docker环境下的运行
目的 Ø 在测试的环境下oracle数据库不存在或访问不方便时,可以将这个环境快速恢复出来 Ø 开发时方便测试之用 可以在任何包含docker服务的机器上运行,具体的docker的安装可以参考如下: ...
- DBA思考系列——学会拒绝不合理的需求
DBA思考系列--学会拒绝不合理的需求 一直以来,个性都比较随意,一般很少拒绝开发人员的一些需求(有点老好人的感觉). 这点一直被老大诟病,也一直在反省!最近又有一件事情,让我觉得:应该学会拒绝不 ...
- [20181124]关于降序索引问题2.txt
[20181124]关于降序索引问题2.txt --//链接:blog.itpub.net/267265/viewspace-2221425/,探讨降序索引中索引的键值.--//实际上使用函数sys_ ...
- MongoDB数据创建与使用
MongoDB数据创建与使用 创建数据库 代码功能:读取本地文本文件,并保存到数据库中 import pymongo #连接mongo数据库 client = pymongo.MongoClient( ...