html+css基础知识
01-html_structure.html
<!DOCTYPE.html>
<html>
<head>
<meta charset="UTF-8">
<title>个人主页</title>
</head>
<body>
<h1>个人简介</h1>
<!-- 注释的快捷键 ctrl + / -->
<a href="./003-a.html">返回链接页</a>
<!--p标签带有样式-->
<p> Visual Studio Code默认是在VScode的控制台下查看html页面，这对于我们调试和查看效果十分不方便。所以这里我们需要安装一下扩展插件，在浏览器中查看html页面。<br />
<em>Visual Studio Code</em>默认是在VScode的控制台下查看html页面，这对于我们调试和查看效果十分不方便。所以这里我们需要安装一下扩展插件，在浏览器中查看html页面。<br />
<i>Visual Studio Code默认</i>是在VScode的控制台下查看html页面，这对于我们调试和查看效果十分不方便。所以这里我们需要安装一下扩展插件，在浏览器中查看html页面。
</p>
<p>10 >5</p>
<p>10 <15</p>
<!--注释内容，方便查看使用-->
你好，欢迎访问我的个人网页！
<div> <!--div标签不带任何样式-->
Visual Studio Code默认是在VScode的控制台下查看html页面，这对于我们调试和查看效果十分不方便。所以这里我们需要安装一下扩展插件，在浏览器中查看html页面。<br />
<b>Visual Studio Code</b>默认是在VScode的控制台下查看html页面，这对于我们调试和查看效果十分不方便。所以这里我们需要安装一下扩展插件，在浏览器中查看html页面。<br />
<p><strong>Visual Studio Code默认是在VScode的控制台下查看html页面，这对于我们调试和查看效果十分不方便。所以这里我们需要安装一下扩展插件，在浏览器中查看html页面。
</strong></p>
</div>
<!--当前目录，./可以省略 ，表示当前目录
src 是路径或者链接属性
alt 是标识内容,尽量带上
-->
<img src="./images/秋风辞.jpg" alt="秋风辞图片" />
<img src="./images/Koala.jpg" alt="考拉"/>
<img src="../../media/img/Desert.jpg" alt="沙漠"/>
<a href="#">回到顶部</a>
</body>
</html>
02-a.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>链接</title>
</head>
<body>
<h1>链接网页的标题</h1>
<!--本地不同网页的链接
href 链接属性
title 鼠标悬停时提示的内容
target 定义窗口打开的位置
target="_self" 默认属性，链接直接替换当前页，覆盖
target="_blank" 新开一个窗口显示网页内容，不覆盖
target="#" 表示不知道链接到哪时，可以链接到顶部
-->
<a href="./001-html_structure.html">图片网页</a>
<a href="https://pinganyun.com/" title="平安云网站" target="_blank">
<img src="./../../../../template/img/icon05_hover.svg" alt="平安云" >
</a>
<a href="#">回到顶部</a>
</body>
</html>
03-list.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表标签</title>
</head>
<body>
<h1>有序列表</h1>
<!--快捷方式 ol>li*3 按TAB-->
<ol>
<li>HTML</li>
<li>css</li>
<li>js</li>
</ol>
<h1>无序列表</h1>
<!-- 快捷方式 ul>(li>a{新闻标题})*3 -->
<ul>
<li><a href="#">新闻标题1</a></li>
<li><a href="#">新闻标题2</a></li>
<li><a href="#">新闻标题3</a></li>
</ul>
<h1>定义列表</h1>
<!-- 快捷方式 dl>(dt+dd)*3-->
<dl>
<dt>HTML</dt>
<dd>负责页面的结构</dd>
<dt>CSS</dt>
<dd>负责页面的表现</dd>
<dt>Javascript</dt>
<dd>负责页面的行为</dd>
</dl>
</body>
</html>
04-table.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格</title>
</head>
<body>
<!--
table 表格
tr 行元素
th td 列元素
border 边框
align 表在网页中的位置left|center|right
td/th th为表头
align 表格内容水平对齐方式left|center|right
valign 表格内容垂直对齐方式 middle|top|bottom
colspan 设置单元格水平合并，设置值是数值
rowspan 设置单元格垂直合并，设置值是数值
cellpadding 表格内容与表格之间的距离
cellspacing 表格与表格之间的距离
-->
<h1>表格</h1>
<table border="1" width="500" height="100" align="center">
<tr>
<td align="center" valign="top">1</td>
<td align="center">2</td>
<td align="center">3</td>
</tr>
</table>
<br />
<hr />
<table border="1" width="800" height="300" align="center">
<tr>
<td colspan="5">基本情况</td>
</tr>
<tr>
<td width="15%"></td>
<td width="25%"></td>
<td width="15%"></td>
<td width="25%"></td>
<td rowspan="5"><img src="./images/zfd.png"/></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
04-1-table布局.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人简历</title>
</head>
<body topmargin="0">
<!--
table布局及实例
将表格boder,cellpadding,cellspacing 全部设置为0，
表格的边框和间距就不占有页面空间，只起到划分空间的作用。
-->
<table border="0" width="800" height="800" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="260" valign="top" bgcolor="#f2f2f2">
<table width="200" align="center" border="0" >
<tr height="100"></tr>
<tr>
<td><img src="./images/zfd.png" alt="个人图片"></td>
</tr>
<tr>
<td align="right">张付东</td>
</tr>
<tr>
<td align="right">19921476397</td>
</tr>
<tr>
<td align="right">1591112944@qq.com</td>
</tr>
</table>
</td>
<td width="40"></td>
<td width="560" valign="top">
<table border="0" width="560" cellpadding="0" cellspacing="0">
<tr>
<td height="80"></td>
</tr>
<tr>
<td align="right"><img src="./images/button_old_131.gif" alt="有事儿您q我"></td>
</tr>
</table>
<br />
<hr />
<br />
<table border="0" height="200" width="560" cellpadding="0" cellspacing="0">
<tr>
<th colspan="2" align="left">个人基本情况</th>
</tr>
<tr>
<td><b>姓名：</b>张付东</td>
<td><b>籍贯：</b>贵州省</td>
</tr>
<tr>
<td><b></b>性别：男</td>
<td><b></b>身高：200cm</td>
</tr>
<tr>
<td><b></b>民族：汉族</td>
<td><b></b>体重：200kg</td>
</tr>
<tr>
<td><b></b>出生日期</td>
<td><b></b>电话</td>
</tr>
<tr>
<td><b></b>现居地址：</td>
<td><b></b>专业：</td>
</tr>
</table>
</td>
<td width="40"></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body>
<!--
form 定义整体的表单布局
action 表示表单提交后链接的地址
method 表单提交方式
GET 表单默认提交方式，地址栏能看到提交参数和值
POST 通过http协议封装提交，地址栏不能看到，后台通过程序接受
lable 为表单元素定义文字标注
for 和input中的id配合使用，能够通过for的值激活输入
input 输入标签
name 键名，通过name提交键值
value 输入时，默认输入值就是value
未输入时，需要指定value
image type="image"，使用图片代替submit提交，不建议使用
hidden type="hidden"，定义一个隐藏的表单域，用来存储值，不在页面显示
-->
<h1>注册表单</h1>
<form action="" method="GET">
<div>
<!-- type="text" 文本类型,单行文本 -->
<label for="username">用户名：</label>
<input type="text" name="username" id="username" />
</div>
<br />
<div>
<!-- type="password" 密码类型 -->
<label for="">密 码：</label>
<input type="password" name="password" />
</div>
<br />
<div>
<!-- type="radio"单选框 时，name为必填项-->
<label for="">性 别：</label>
<input type="radio" name="gender" id="male" value="0" /> <label for="male">男</label>
<input type="radio" name="gender" id="female" value="1" /><label for="female">女</label>
</div>
<br />
<div>
<!-- type="checkbox" 复选框类型 -->
<label for="">爱 好：</label>
<input type="checkbox" name="like" id="" value="study"/> 学习
<input type="checkbox" name="like" id="" value="python"/> python
<input type="checkbox" name="like" id="" value="beauty"/> 美少女
</div>
<br />
<div>
<!-- type="file" 文件，图片类型 -->
<label for="" for="">图 片：</label>
<input type="file" />
</div>
<br />
<div>
<!-- textarea 多行文本框类型 -->
<label for="">自我介绍：</label>
<textarea name="area" id="" cols="30" rows="10"></textarea>
</div>
<br />
<div>
<!-- 下拉选框 类型 -->
<label for="">出生省份：</label>
<select name="box" id="">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
<option value="guangzhou">广州</option>
<option value="nanjing">南京</option>
</select>
</div>
<br />
<div>
<input type="hidden" name="hidden" id="" value="1">
</div>
<div>
<!-- 提交 重置 类型 -->
<input type="submit" name="" value="提交" />
<!-- <input type="image" src="./images/Koala.jpg"> image提交类型，不建议使用-->
<input type="reset" name="" value="重置" />
</div>
</form>
</body>
</html>
06-css.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css介绍</title>
<!-- 第二种引入样式的方式：外联式，链接到外部css文件 -->
<link rel="stylesheet" type="text/css" href="../css/main.css">
<!-- 第二种引入样式的方式：内嵌式 -->
<style type="text/css">
h1{
color: blue;
font-size: 24px;
}
</style>
</head>
<body>
<h1>标题</h1>
<div>这是一个div标签</div>
<!-- 第二种引入样式的方式：行内样式 -->
<a href="http://www.baidu.com" style="font-size: large;color:darkturquoise;">百度网页</a>
</body>
</html>
06-1 css_text.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常用文本样式</title>
<style type="text/css">
*{
font-size:20px;
}
/* 1、标签选择器 */
div{
color: red;
}
/* 2、id选择器，id是唯一的，这个选择器基本不使用
id选择器和类选择器同时设置时，id选择器的权重高于类选择器，
id选择器优先生效
*/
#div1{
color: blue;
}
/* 3、类选择器：多个标签可以使用一个类，一个标签也可以使用多个类 */
.green{
color: green;
}
.big{
font-size: 40px;
}
/* 4、层级选择器 */
.box{
color: green;
font-weight: bold;
}
.box span{
color: red;
}
.box .span1{
text-decoration: underline;
}
/* 5、组选择器，多个选择器相同的样式放在一起 */
.box1,.box2,.box3{
font-size: 20px;
color: seashell;
}
/* 6、伪类选择器 */
.link{
font-size: 30px;
text-decoration: none;
color: green;
}
/* 鼠标悬停时会变化 */
.link:hover{
color:gold;
font: bold;
}
.box01,.box02{
font-size: 30px;
}
/* 插到前面的内容，不能选中的 */
.box01:before{
content: "- 前面的字";
color:yellow;
}
.box02::after{
content: "- 后面的字";
color:blue
}
</style>
</head>
<body>
<!--
常用的文本样式：
color 颜色
font-size 字体大小，默认为16px
font-family 文字字体，如“微软雅黑” ：Microsoft Yahei
font-style 文字倾斜设置。normal/italic
font-weight 文字加粗设置 normal/bold
-->
<div id="div1" class="big">这是第一个div</div>
<div class="green big">这是第一个div</div>
<div>这是第一个div</div>
<p class="green">这是一个段落</p>
<div class="box">有道考神雅思冲7全程班-<span>旗舰版</span>
<div class="box01">【27】欧阳萍经典听口训练营.第四季
有道考神雅思冲7全程班-旗舰版</div>
<div class="box02">【27】<span class="span1">欧阳萍经典听口训练营</span>第四季
有道考神雅思冲7全程班-旗舰版</div>
【27】欧阳萍经典听口训练营.第四季
</div>
<a href="www.baidu.com" class="link">百度首页</a>
</body>
</html>
07-div练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.box{
/* width: 200px; 这里的宽和高不是真实的宽和高，只是内容所占有的空间
height: 200px; */
width: 140px;
height: 140px;
background-color: gold;
border: 10px solid black;/* 外边框，会实际增加边框的大小，所以需要调减宽和高 */
padding: 20px;
/* 总结：
盒子宽度=width +padding左右+ border左右;
盒子高度=height +padding左右+ border左右; */
}
.news_title{
width: 380px;
height: 35px;
border-top:1px solid #f00;
border-bottom: 3px solid #666;
font-size: 20px;
color: #333;
font-family: ‘Microsoft Yahei‘;
font-weight: normal;
padding-top: 15px;
line-height: 20px;
padding-left: 20px;
}
.news_title2{
width: 380px;
height: 40px;
border-top:1px solid #f00;
border-bottom: 3px solid #666;
font-size: 20px;
color: #333;
font-family: ‘Microsoft Yahei‘;
font-weight: normal;
/* padding-top: 15px;
line-height: 20px; */
line-height: 40px; /*行高设置为总体高度，内容会自动垂直居中*/
text-indent: 20px;
}
</style>
</head>
<body>
<!-- .box tab 就会有<div class="box"></div> -->
<div class="box">外边距的设置方法和padding的设置方法相同</div>
<h3 class="news_title">新闻列表</h3>
<h3 class="news_title2">新闻列表</h3>
</body>
</html>
08 margin.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
border: 1px;
background-color: gold;
margin: 50px auto 100px; /* 左右居中 */
}
.box02{
width: 200px;
height: 200px;
border: 1px;
background-color: gold;
margin: 0px; /* 左边还是有一点距离 */
}
/*去出左边默认保留的8px*/
/* body{
margin: 0px;
} */
.box03{
width: 202px;
height: 156px;
background-color: green;
margin: 50px auto 0px;
}
.box03 div{
width: 202px;
height: 32px;
background-color: gold;
border: 1px solid green;
margin-top: -1px; 去除边框重叠加粗的情形
}
</style>
</head>
<body>
<div class="box03">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box"></div>
<div class="box02"></div>
</body>
</html>
09 垂直外边框合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
background-color: gold;
/* border: 1px solid #000; 第一种解决塌陷的方法 */
/* overflow: hidden; 第二种解决塌陷的方法 */
}
.con{
width: 200px;
height: 200px;
background-color: green;
margin-top: 20px;
}
/* 伪元素方法，第三种解决塌陷 */
.clearfix::before{
content: "";
display: table;
}
</style>
</head>
<body>
<!-- margin-top塌陷问题 -->
<div class="box clearfix">
<div class="con"></div>
</div>
</body>
</html>
09-1 overflow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 220px;
background-color: gold;
border: 1px solid #000;
margin: 50px auto 0px;
overflow: auto;
/*
溢出：内容比边框大
hidden:溢出部分隐藏
visible: 缺省值，溢出可见
scroll: 滚动条显示溢出内容，内容不超出也会显示滚动条
auto：内容不超出时不显示，超出时才会显示滚动条
*/
}
</style>
</head>
<body>
<div class="box">
file:///E:/%E6%8A%80%E6%9C%AF%E5%AD%A6%E4%B9%A0/
file:///E:/%E6%8A%80%E6%9C%AF%E5%AD%A6%E4%B9%A0/Python+%E7%88%AC%E8%99%AB/
file:///E:/%E6%8A%80%E6%9C%AF%E5%AD%A6%E4%B9%A0/Python+%E7%88%AC%E8%99%AB/projects
file:///E:/%E6%8A%80%E6%9C%AF%E5%
</div>
</body>
</html>
10 元素类型转换
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.menu{
width: 694px; /* div需要设置宽度才会居中 */
height: 50px;
/* background-color: cyan; */
margin: 50px auto 0;
font-size: 0; /* 解决行内块之间有间隙问题 */
}
.menu a{
width: 98px;
height: 48px;
border: 1px solid gold;
background-color: #fff;
display: inline-block;
font-size: 16px; /* 解决行内块之间有间隙问题 */
margin-left: -1px; /*解决重复外边框问题*/
text-align: center; /*水平居中*/
line-height: 48px; /*垂直居中*/
text-decoration: none; /*去除链接下划线*/
color: pink;
font-family: ‘Microsoft Yahei‘;
}
/* 伪类，鼠标放上面时显示不同颜色 */
.menu a:hover{
background-color: gold;
color: #fff;
}
.box3{
width: 200px;
height: 20px;
display: none;
background-color: goldenrod;
}
.box2:hover .box3{
display: block;
}
/* .box2 h3{
display: inline-block;
} */
.menu2{
width: 694px; /* div需要设置宽度才会居中 */
height: 50px;
list-style: none; /*去掉li的小圆点*/
/* background-color: cyan; */
margin: 50px auto 0;/*居中，去掉ul的margin默认值*/
padding: 0; /*去掉ul的padding默认值*/
}
.menu2 li{
width: 98px;
height: 48px;
border: 1px solid gold;
background-color: #fff;
float: left;
margin: -1px;
}
.menu2 li a{
width: 98px;
height: 48px;
display: inline-block;
text-align: center; /*块元素水平居中*/
line-height: 48px;
color: pink;
text-decoration: none;
}
.menu2 li a:hover{
background-color: goldenrod;
color: #fff;
}
</style>
</head>
<body>
<!-- div + a 实现菜单，实际开发中使用ul + li -->
<div class="menu">
<a href="#" class="index">首页</a>
<a href="#">公司简介</a>
<a href="#">解决方案</a>
<a href="#">公司新闻</a>
<a href="#">行业动态</a>
<a href="#">招揽贤才</a>
<a href="#">联系我们</a>
</div>
<div class="box2">
<h3>公司首页</h3>
<div class="box3">这是公司首页信息</div>
</div>
<!-- ul.menu>(li>a{公司简介})*7 -->
<ul class="menu2">
<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>
</body>
</html>
11.清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.list{
width: 210px;
/* height: 400px; 一般不设高度，根据内容自动实现，
但此时float会被看做没有高度，ui会成为一条线，所以要清除浮动*/
border: 1px solid #000;
margin: 50px auto 0;
padding: 0;
list-style: none;
/* overflow: hidden; 方法一：清除浮动 */
}
.list li{
width: 50px;
height: 50px;
background-color: gold;
margin: 10px;
float: left; /*浮动元素不能撑开ui的高度，需要解决这个问题，就叫清除浮动 */
}
/* 解决top塌陷问题
.clearfix::before{
content: "";
display: none;
}
/* 第三种方法清除浮动：伪类的方式实现第二种方法
.clearfix::after{
content: "";
clear: both;
display: table;
} */
/* 将塌陷问题和清除浮动放在一起 最终写法*/
.clearfix::before,.clearfix::after{
content: "";
display: table;
}
.clearfix::after{
clear: both;
}
.clearfix{
zoom: 1;
}/*解决IE浏览器不能识别clearbefore和after时，能够收缩网页*/
</style>
</head>
<body>
<!-- ul.list>li{$}*8 -->
<ul class="list clearfix">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<!-- <div style="clear: both;"></div> 清除浮动第二种方式，实际开发不适用 -->
</ul>
</body>
</html>
12 文字绕图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字绕图</title>
<style type="text/css">
.con{
width: 450px;
height: 210px;
border: 1px solid #000;
margin: 50px auto 0;
}
.pic{
width: 80px;
height: 80px;
background-color: gold;
float: left;
margin: 10px;
margin-bottom: 0px;
}
.pic img{
width: 80px;
height: 80px;
}
.text{
color: #666;
/* background-color: green; */
height:210px;
line-height: 21px;
}
</style>
</head>
<body>
<div class="con">
<div class="pic">
<img src="../../media/img/Koala.jpg" alt="考拉">
</div>
<div class="text">10 李承铉直拍戚薇坐过山车 322万 港媒：*急售上亿房产，低于市价半成！ 观察者网08-12 22:10 眉山发布暴雨蓝色预警！请注意防范地质灾害 热点四川新闻网08-12 21:08 逆势IPO，贝壳找房即将在美股上市 观察者网08-12 13:15 神兽无限召唤，新手村也能爆神装，全服横着走！ 战歌裁决广告 国际金价一夜重挫6%，上金所发布公告 观察者网08-12 13:47 印度又挑事！拟禁止华为、中兴参与5G网络建设，两家公司刚刚这... 人民资讯08-12 21:30 大连地铁回应外国人攀爬扶手：无论哪国人，在中国都要尊重中国法律法规
</div>
</div>
</body>
</html>
13 新闻列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.news_title{
width: 400px;
height: 40px;
border-bottom: 1px solid #ff8200;
margin: 50px auto 0px;
}
.news_title h3{
float: left;
width: 80px;
height: 40px;
background-color: #ff8200;
margin: 0px;
font-size: 16px;
color: #fff;
text-align: center;
line-height: 40px;
font-weight: normal;
}
.news_title a{
float: right;
font-size: 14px;
line-height: 40px;
text-decoration: none;
}
.news_title a:hover{
color:#ff8200;
}
</style>
</head>
<body>
<div class="news_title">
<h3>新闻列表</h3>
<a href="#">更多></a>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.news_title{
width: 400px;
height: 40px;
border-bottom: 1px solid #ff8200;
margin: 50px auto 0px;
}
.news_title h3{
float: left;
width: 80px;
height: 40px;
background-color: #ff8200;
margin: 0px;
font-size: 16px;
color: #fff;
text-align: center;
line-height: 40px;
font-weight: normal;
}
.news_title a{
float: right;
font-size: 14px;
line-height: 40px;
text-decoration: none;
}
.news_title a:hover{
color:#ff8200;
}
</style>
</head>
<body>
<div class="news_title">
<h3>新闻列表</h3>
<a href="#">更多></a>
</div>
</body>
</html>
14 定位实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.con{
width: 100px;
height: 100px;
background-color: gold;
margin: 50px auto 0px;
position: relative;
border-radius: 14px;
}
.box{
width: 28px;
height: 28px;
background-color: red;
color: #fff;
text-align: center;
line-height: 28px;
position: absolute;
left: 86px;
top: -14px;
border-radius: 14px;
}
</style>
</head>
<body>
<div class="con">
<div class="box">5</div>
</div>
</body>
</html>
14-1 定位实例-弹框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.menu{
width: 960px;
background-color: gold;
/* margin: 0px auto 0px; 使用定位时，margin居中会失效*/
position: fixed;
top: 0;
left: 50%;
margin-left: -480px; /*居中技巧：50%，再拉回一半*/
}
p{
text-align: center;
}
.popup{
width: 500px;
height: 300px;
border: 1px solid #000;
background-color: #fff;
position: fixed;
left: 50%;
margin-left: -251px;
top: 50%;
margin-top: -151px;
z-index: 9999;
}
.popup h2{
background-color: gold;
margin: 10px;
height: 40px;
}
.mask{
position: fixed;
height: 100%;
width: 100%;
background-color: #000;
left: 0;
top: 0;
opacity: 0.5;
z-index: 9998;
}
.pop_con{
display: none;/*通过js控制display属性，none为隐藏弹框，block为显示*/
}
</style>
</head>
<body>
<div class="menu">菜单文字，固定在顶部</div>
<div class="pop_con">
<div class="popup">
<h2>弹窗的标题</h2>
</div>
<div class="mask">
</div>
</div>
<p>这是测试内容这是测试内容这是测试内容这是测试内容</p>
<br />
<br />
<br />
<br />
<br />
<p>这是测试内容</p>
<p>这是测试内容这是测试内容这是测试内容这是测试内容</p>
<br />
<br />
<br />
<br />
<br />
<p>这是测试内容</p>
<p>这是测试内容这是测试内容这是测试内容这是测试内容</p>
<br />
<br />
<br />
<br />
<br />
<p>这是测试内容</p>
<br />
<br />
<br />
<br />
<br />
<p>这是测试内容</p>
<br />
<br />
<br />
<br />
<br />
<p>这是测试内容</p>
<br />
<br />
<br />
<br />
<br />
</body>
</html>
15 backgronud
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>backgrounf属性</title>
<style type="text/css">
.box{
width: 500px;
height: 200px;
border: 5px solid #000;
margin: 50px auto 0;
background-color: cyan;
background-image: url(../../../../pro_test1/test1/media/img/new_logo.png);
background-repeat: no-repeat;
/* background-repeat属性：
repeat-x 只平铺x轴；
repeat-y 只平铺y轴;
no-repeat 只平铺一次;
repeat 默认全部平铺*/
/*background-position: center center;/*9个块，水平：left center right;垂直：top center bottom*/
background-position:20px 20px;/*可以指定数值*/
}
</style>
</head>
<body>
<div class="box">
这是html
</div>
</body>
</html>
16 特征布局_翻页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>翻页</title>
<style type="text/css">
.pagenation{
list-style: none;
margin: 50px auto 0;
padding: 0;
width: 600px;
height: 40px;
border: 1px solid #666;
text-align: center;
font-size: 0;
}
.pagenation li{
display: inline-block;
height: 26px;
font-size: 16px;
margin: 7px 5px 0px;
}
.pagenation li a{
display: block;
background-color: gold;
line-height: 26px;
text-align: center;
text-decoration: none;
padding: 0 10px;
font:‘Microsoft Yahei‘;
color: #000;
}
.pagenation li a:hover{
background-color: red;
color: #fff;
}
</style>
</head>
<body>
<!-- 所需知识：盒模型、内联元素 -->
<ul class="pagenation">
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><span>...</span></li>
<li><a href="#">17</a></li>
<li><a href="#">18</a></li>
<li><a href="#">19</a></li>
<li><a href="#">20</a></li>
<li><a href="#">下一页</a></li>
</ul>
</body>
</html>
特征布局_导航条01
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航条01</title>
<style type="text/css">
.menu{
list-style: none;
margin: 50px auto 0;
padding: 0;
width: 958px;
height: 40px;
border: 1px solid #666;
text-align: center;
background-color: #55a81a;
font-size: 0px;
}
.menu li{
display: inline-block;
font-size: 16px;
height: 40px;
}
.menu li a{
line-height: 40px;
text-decoration: none;
color: black;
}
.menu li a:hover{
color: #ff8800;
}
.menu li span{
height: 40px;
display: inline-block;
margin: 0 20px;
}
</style>
</head>
<body>
<!-- 所需知识：盒模型、行内元素布局 -->
<ul class="menu">
<li><a href="">网站建设</a></li>
<li><span>|</span></li>
<li><a href="">网站建设</a></li>
<li><span>|</span></li>
<li><a href="">网站建设</a></li>
<li><span>|</span></li>
<li><a href="">网站建设</a></li>
<li><span>|</span></li>
<li><a href="">网站建设</a></li>
<li><span>|</span></li>
<li><a href="">网站建设</a></li>
<li><span>|</span></li>
<li><a href="">网站建设</a></li>
</ul>
</body>
</html>
特征布局_导航条02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航条02</title>
<style type="text/css">
.menu{
list-style: none;
margin: 50px auto 0;
padding: 0;
width: 958px;
height: 40px;
border: 1px solid #666;
/* text-align: center; */
background-color: #55a8ea;
position: relative;
}
.menu li{
height: 40px;
float: left;
}
.menu li a{
line-height: 40px;
text-decoration: none;
color: #fff;
padding: 0 20px;
display: inline-block;
}
.menu li a:hover{
background-color: #00619f;
}
.menu .new{
width: 200px;
height: 50px;
border:1px solid #000;
background: url(../../../test1/media/img/new_logo.png) no-repeat;
position: absolute;
left: 406px;
top: -52px;
}
</style>
</head>
<body>
<!-- 所需知识：盒模型、行内元素布局 -->
<ul class="menu">
<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 class="new"></li>
</ul>
</body>
</html>
HTML+CSS基础