您的位置：首页 > Web前端 > CSS

DIV+CSS---HTML+CSS

2015-12-07 14:49 477 查看

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/hoho_sxy/article/details/50205673 1.DIV+CSS---HTML+CSS
WEB的标准组成：
1）结构（structure）
2）表现（presentation）---CSS
3）动作（behaviour）--javascript

2.Table and DIV
1）Table：存储数据
2）DIV：布局网页
a>内容与形式分离
b>网站改版变得容易
c>搜索引擎友好---SEO
真正的高手：DIV+Table+CSS

3.SEO (SEO是由英文SEARCH ENGINE OPTIMIZATION缩写而来，
中文意译为“搜索引擎优化”。SEO是指通过对网站内部
调整优化及站外优化，使网站满足搜索引擎收录排名需求，
在搜索引擎中关键词排名提高，从而把精准用户带到网站，
获得免费流量，产生直接销售或品牌推广。)
a> <h1>+<title>
b> 合理使用<h2><h3>
c> 注意<meta>标签（给搜索引擎看的关键字）
d> 使用纯净的HTML代码网页---HTML和CSS的分离
e> <img /> 添加alt属性---网络爬虫、网络蜘蛛

4.CSS的使用方法
a>行内样式：使用style=“”
<p style="color:red; font-size:16px;">一段内容</p>
b>嵌入方式：在<head></head>之间使用<style></style>
<html>
<head>
<style type="text/css">
#div1{
color:red;
font-size:16px;
}

</style>
</head>
<body>
<div id="div1">我的DIV</div>
</body>
</html>
c> 链接方式：在<head></head>之间使用<link>
<head>
<link rel="stylesheet" href="style.css">
</head>
HTML5中不需要添加type="text/css"
d> 导入方式：import

5.link和 import的区别（自己查）
两者都是外部引用CSS的方式，但是存在一定的区别：

　　区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；
@import属于CSS范畴，只能加载CSS。

　　区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

　　区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

　　区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

6.四种方式的优先级
行内样式>嵌入方式> 链接方式>导入方式

7.CSS的选择器

1）标签选择器
HTML: <P>一段文字</p>
CSS: p{color:red; font-size:16px;}

2）id选择器----最好是唯一
HTML: <div id="myDiv">这是我的DIV</div>
CSS: #myDiv{color:red; font-size:16px;}

3）class选择器
HTML: <div class="myDiv">这是我的DIV</div>
CSS: .myDiv{color:red; font-size:16px;}

4）*选择器----全局选择器
*{margin:0;padding:0;}

5 )多个class选择器能同时使用
HTML: <div class="myDiv1 myDiv2">这是我的DIV</div>
CSS: .myDiv1{color:red;}
.myDiv2{font-size:16px;}

6）id选择器和class选择器可以一起使用
HTML: <div class="myDiv1" id=“myDiv2">这是我的DIV</div>
CSS: .myDiv1{color:red;}
#myDiv2{font-size:16px;}

7)选择器嵌套(id嵌套和class嵌套)使用空格
HTML:
<div id="myDiv">
<div id="myDiv1">mydiv1</div>
<div id="myDiv2">mydiv2</div>
</div>
CSS: #myDiv #myDiv1{font-size:16px;}

8）选择器并列----使用，号
HTML:
<div class="myDiv1">mydiv1</div>
<div class="myDiv2">mydiv2</div>
CSS:
.myDiv1,.myDiv2{font-size:16px;}

9）
HTML:
<div class="myDiv">
<div class="myDiv1">myDiv1</div>
<div class="myDiv2">myDiv2</div>
</div>
CSS:
第一种写法：
.myDiv .myDiv1{font-size:16px; color:green;}
.myDiv .myDiv2{font-size:16px; color:red;}
第二种写法：
.myDiv{font-size:16px;}
.myDiv .myDiv1{color:green;}
.myDiv .myDiv2{color:red;}

8. 盒子模型
margin--外边距
border--边框
padding--内边距，留白，补白
content--内容
9. 块级元素+内联元素
1）块级元素：<P><div>
2 ) 内联元素 : <a>

10.margin
(1)margin:top right bottom left;
margin:tb lr;
tb-top+bottom
lr-left+right
margin:top lr bottom
margin:trbl;
11.margin为负数

12.制作导航栏nav
(1)添加一个DIV
HTML:<div id="nav"></div>
CSS: #nav{
width:960px;
height:35px;
background:#CCC;
margin:0 auto;
margin-top:30px;
}
(2)向导航栏中添加导航项
HTML:
<ul>
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
<li>西瓜</li>
<li>猕猴桃</li>
</ul>
CSS:#nav ul li{
width:100px;
float:left;
list-style:none;
background:red;
line-height:35px;
text-align:center;
}
(3)修改表项,使导航项可以自适应
CSS:#nav ul li{
padding:0 20px;——可以修改为margin试验一下
float:left;
list-style:none;
background:red;
line-height:35px;
text-align:center;
}
(4)给导航栏添加链接
HTML:
<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>
</ul>
CSS:
#nav ul li a{
font-size:20px;
color:#FFF;
text-decoration:none;
}

#nav ul li a:hover{
display:block;
height:35px;
text-decoration:underline;
background:#000;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航