2019年html复习内容
1、网页的基本结构
<!DOCTYPE html>
<html>
<head><!-- 头部 -->
<title>网页标题</title>
</head><!-- 头部 -->
<body><!-- 身体 -->
身体
</body><!-- 身体 -->
</html>
2、html元素
标签：
<P></P>
<br>
<form></form>
<hr>
<h1></h1><h6></h6>
img#<img src="路径"alt="提示信息">
<audio></audio>
<video></video>
超链接：
<a href=""></a>
锚点链接：
第一步：标记位置<a name="p1"></a>
第二步：创建链接<a href="#p1"></a>
空连接：<a href="#"></a>
列表：
<ul></ul>
<li></li>
<ol></ol>
<dl></dl>
<dt></dt>
<dd></dd>
表格：
<table></table>
<tr></tr>
<td></td>
表单：
<form></form>
<input type="" name="">
<label></label>
<button></button>
<select></select>
<textarea></textarea>
3、css样式
行内样式>内嵌样式>外部样式
引用
| 标签选择器 | ID选择器 | 类选择器 | |
|---|---|---|---|
| 格式 | li | id="" | class="" |
| 应用方法 | li | # | . |
| 拓展 |
文本属性
line-height （行高）
text-align （对齐）
letter-spacing （字符间距）
text-decoration （文本修饰 ）
字体属性
font（缩写形式）
font-weight（粗细）
font-size（大小）
font-family（字体）
Color（字体颜色）
背景属性
background-color （背景颜色）
background-image （背景图片）
background-repeat （背景重复）
background-position （背景位置 ）
4、css属性
盒模型常用CSS属性
border 、padding 、margin、width、height
标准文档流
行内元素、块级元素
行内元素与块级元素的转换
display：none | inline | block;
5、期末猫先生
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>猫先生</title>
<link rel="stylesheet" type="text/css" href="style/css.css">
</head>
<body>
<div id="ddiv">
<div id="logo"> <img src="image/logo.png"> </div>
<div id="nav">
<ul>
<li><a href="index.html">首页</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="#">APP下载</a></li>
<li><input type="button" value="立即咨询" id="ask"></li>
</ul>
</div>
</div>
<!-- 图片滚动 -->
<div id="ddiv2">
<div id="banner">
<ul>
<li><a name="p1"></a><img src="image/img3.jpg "></li>
<li><a name="p2"></a><img src="image/img1.jpg "></li>
<li><a name="p3"></a><img src="image/img2.jpg "></li>
<li><a name="p4"></a><img src="image/img4.jpg "></li>
</ul>
</div>
<div id="banner_nav">
<ul>
<li><a href="#p1">1</a></li>
<li><a href="#p2">2</a></li>
<li><a href="#p3">3</a></li>
<li><a href="#p4">4</a></li>
</ul>
</div>
</div>
<!-- 关于猫先生 -->
<div id="content">
<div id="content_about" >
<div id="about_top">
<div id="title_center">
<div class="bigline"> </div>
<div id="top_center">
<h1>关于猫先生</h1>
<h2>About us</h2>
</div>
<div class="bigline"> </div>
</div>
</div>
<div id="about_left">
<h3>猫先生</h3>
<h3 style="margin-bottom:30px;">您的社区管家</h3>
<p>南京猫先生环保科技有限公司（简称"猫先生"）是江苏华展环境艺术股份有限公司（简称"华展股份"）旗下全资子公司。</p>
<p>猫先生聚焦智慧街具建设应用运营，是垃圾分类回收运营平台 ,为居民提供智能化便民服务设施，如社区垃圾分类、智能健身设施、智能交通街具、公共卫生设施、共享街具等户外场景下的城市智能街道家具。猫先生有效解决政府不投资或预算较低的情况，通过市场化运作来提升城市的户外环境和设施服务水平，同时也通过智能硬件和猫先生环境管家APP为电商公司提供数据服务，最终实现多方受益。</p>
<p>猫先生以讨人喜欢的卡通萌化形象传播，希望成为每个人身边的社区环境管家。猫先生将以更智能高效的软硬件组合形式，推进我国社区垃圾分类进程，为智能社区、智慧城市的发展做出贡献。</p>
<p>
<input type="button" value="查看更多>>" id="btn">
</p>
</div>
<div id="about_right"><img src="image/pic1.jpg" width=360px height=280px id=ffff></div>
</div>
<!-- 合作模式 -->
<div id="title_center">
<div class="bigline"> </div>
<div id="top_center">
<h1>合作模式</h1>
<h2>Cooperation</h2>
</div>
<div class="bigline"> </div>
</div>
<div id="cooporation">
<ul>
<li><a href="#"><img src="image/pic2.jpg"></a><a href="#" class="co_a">合作模式</a></li>
<li><a href="#"><img src="image/pic3.jpg"></a><a href="#" class="co_a">数字媒体</a></li>
<li><a href="#"><img src="image/pic4.jpg"></a><a href="#" class="co_a">再作资源合作</a></li>
</ul>
</div>
<div id="title_center">
<div class="bigline"> </div>
<!-- 咨询动态 -->
<div id="top_center">
<h1>资讯动态</h1>
<h2>Information</h2>
</div>
<div class="bigline"> </div>
</div>
<div id="zxdt">
<ul>
<li><img src="image/pic5.jpg" width=365px height=215px><h2>猫先生进驻上海</h2><h3>猫先生牛逼</h3><h6><hr>2019-5-31</h6></li>
<li><img src="image/pic6.png" width=365px height=215px><h2>猫先生进驻长沙</h2><h3>猫先生牛逼</h3><h6><hr>2019-5-31</h6></li>
<li><img src="image/pic7.jpg" width=365px height=215px><h2>猫先生进驻北极</h2><h3>猫先生牛逼</h3><h6><hr>2019-5-30</h6></li>
<li><img src="image/pic7.png" width=365px height=215px><h2>猫先生垃圾分类房</h2><h3>猫先生牛逼</h3><h6><hr>2019-5-29</h6></li>
<li><img src="image/pic8.jpg" width=365px height=215px><h2>猫先生图标</h2><h3>猫先生牛逼</h3><h6><hr>2019-5-29</h6></li>
<li><img src="image/pic9.jpg" width=365px height=215px><h2>猫先生进驻老年社区</h2><h3>猫先生牛逼</h3><h6><hr>2019-5-28</h6></li>
</ul>
</div>
</body>
</html>
css.css
@charset "utf-8";
/* CSS Document */
*{
margin:0px;/**/
padding:0px;}/*调整*/
body{
font-size:14px;/*字体大小*/
font-family:微软雅黑;/*字体*/
}
div{
margin:0px auto;}/*可见*/
#ddiv{
width:1200px;/*宽度*/
height:90px;/*高度*/
margin-bottom:10px;/*下边界*/
}
#logo{
float:left;/*设置浮动*/
margin-right:100px;/*右边距*/
}
#nav{
float:left;/*浮动 左*/
}
#nav ul li{
float:left;/*浮动 左*/
width:100px;
height:30px;
line-height:30px;/*线条高度*/
margin-top:30px;/*上边距*/
text-align:center;/*文本对齐：居中*/
list-style:none;/*表式：无*/
}
#ask{/*点击咨询我按钮*/
background-color:#FFF;/*背景色*/
width:100px;/*宽*/
height:30px;/*高*/
border:1px solid #000;/*边框一个像素，纯的色*/
text-align:center;/*文本对齐：中心*/
margin-left:100px;/*左边距：100px*/
}
#nav ul li a{
text-decoration:none;
color:#000;
width:100px;
height:30px;
display:block;/*显示：块； */
}
#nav ul li a:hover{
color:#9C0;
font-weight:bold;/*字体粗细：粗体；*/
}
/*图片滚动*/
#ddiv2{
margin:0px auto;
width:1200px;
height:650px;
position:relative;/*位置：相对；*/
}
#banner{
width:1200px;
height:650px;
margin-bottom:10px;
overflow:hidden;
}
#banner img{
width:1200px;
height:650px;
}
#banner li{
list-style:none;
}
#banner_nav{
position:absolute;
bottom:5px;
left:5px;
}
#banner_nav li{
background-color:#abce23;
float:left;
list-style:none;
width:30px;
height:30px;
text-align:center;
line-height:30px;
margin:0px 5px;
border-radius:10px;
}
#banner_nav a{
color:#FFF;
text-decoration:none;/*文字装饰：无；*/
display:block;
}
/*关于猫先生*/
#content{
width:1200px;
height:500px;
margin-bottom:10px;
}
#content_about{
height:600px;}
#about_top{
height:100px;
margin-bottom:10px;
}
/*咨询动态*/
#top_center{
float:left;
width:180px;
text-align:center;
}
/*合作模式*/
#title_center{
width:390px;
margin:0px auto;
}
.bigline{
float:left;
width:100px;
height:40px;
border-bottom:5px solid #9C0;
}
#about_left{
clear:both;
width:700px;
height:0px;
font-size:14px;
float:left;
line-height:30px;
text-indent:2em;
}
#about_left h3{
line-height:40px;/*线高*/
text-indent:0em;}
#about_right{
width:360px;
height:280px;
border:5px solid #abce23;
float:right;
}
#ffff{
position:relative; /*位置：相对；*/
top:85px;
right:85px;
}
#btn{
background-color:#9C0;
color:#FFF;
width:100px;
height:30px;
border:none;
text-align:center;}
#content_coporation{
clear:both;}
#footer{
width:1200px;
height:200px;
}
#cooporation{
clear:both;
margin:0px auto;
}
#cooporation li{
float:left;
width:321px;
height:400px;
list-style:none;
text-align:center;
box-shadow:0 0 30px #CCC;
margin:38px;
padding-top:80px;
margin-top:80px;
}
#cooporation li:hover{
transform:scale(1.05);/*变换：比例（1.05）；*/
transition:all 0.27s;
}
.co_a{
display:block;
margin:0px auto;
background-color:#abce23;
font-size:20px;
color:#FFF;
width:150px;
height:30px;
text-align:center;
border-radius:10px;
margin-top:40px;
text-decoration:none;/*文字装饰：无*/
}
#zxdt{
clear:both;
margin:0px auto;
}
#zxdt li{
float:left;
list-style:none;
margin-top:80px;
margin:15px;
}
hr{
width:75%;
}