一、📚作品介绍
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
二、🔗作品效果
▶️视频演示
https://live.csdn.net/v/embed/240798
(title-Y09JP 公益校园安全留言表单、视频、)]
🧩 截图演示
三、💒 作品代码
🧱HTML代码
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="main" >
<div class="content12">
<div class="daohang">
<ul>
<li class="active"><a href="index.html">首页</a>
</li>
<li ><a href="guanlizeren.html">管理责任</a></li>
<li ><a href="xiaochuyinhuan.html">消除隐患</a></li>
<li ><a href="anquanchangshi.html">安全常识</a></li>
<li ><a href="yingduifangfa.html">应对方法</a></li>
<li ><a href="anquanbiaoyu.html">安全标语</a></li>
<li ><a href="anjianshili.html">案件实例</a></li>
<li ><a href="youkeliuyan.html">游客留言</a></li>
<li ><a href="shipinzhanshi.html">视频展示</a></li>
<li ><a href="yonghudenglu.html">用户登录</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="content12">
<div class="guanggaotupian">
<div class="img">
<img src="images/1.jpg"></div>
</div>
</div>
<div class="clear"></div>
<div class="content12">
<div class="taitou">
<div class="title">
<div class="stitle"> 关于</div>
<div class="clear"></div>
<div class="triangleup"></div>
</div>
</div>
<div class="gy">
<div class="text">
<div class="list">
<img src="images/2.jpg" class="img" >
</div>
校园安全与每个师生、家长和社会都有着密切的关系。从广义上讲，校园事故是指学生在校期间，由于某种偶然突发的因素而导致的人为伤害事件。就其特点而言，一般是因为责任人疏忽大意过失失职而不是因为故意而导致事故的发生。<br><br>2017年12月，校园安全入选2017年民生热词榜。
</div>
<div class="clear"></div>
<div class="slist">
<img src="images/3.jpg" class="simg" >
<img src="images/4.jpg" class="simg" >
</div>
</div>
</div>
<div class="clear"></div>
<div class="content4">
<div class="taitou">
<div class="title">
<div class="stitle"> 美图</div>
<div class="clear"></div>
<div class="triangleup"></div>
</div>
</div>
<div class="xiangceliebiao">
<ul>
<li>
<div class="img"><img src="images/5.jpg"></div>
</li>
<li>
<div class="img"><img src="images/6.jpg"></div>
</li>
</ul>
</div>
</div>
<div class="content8">
<div class="taitou">
<div class="title">
<div class="stitle"> 案件实例</div>
<div class="clear"></div>
<div class="triangleup"></div>
</div>
</div>
<div class="ajsl">
<div class="list">
<img src="images/7.jpg" class="img">
<img src="images/8.jpg" class="img">
<img src="images/9.jpg" class="img">
</div>
<div class="desc">
<br><br>2010年3月23日，福建南平一名疑患精神病男子在南平实验小学校门口挥刀乱捅，至少造成小学生8人死亡。据悉，凶手是一名被辞退的社区诊所医生，疑似精神病患者。<br><br>2010年4月12日，在广西合浦某小学门前又发生了一起凶杀事件，2人死亡、5人受伤，其中包括多名小学生。<br><br>2010年4月28日,广东雷州男子校园内砍伤师生16人，广东省湛江市下辖雷州市雷城第一小学发生血案。</div>
</div>
</div>
<div class="clear"></div>
<div class="content12">
<div class="dibu">
<div class="desc">
校园安全
</div>
</div>
</div>
<div class="clear"></div></div></body></html>
🏠CSS代码
@charset "utf-8";
*{margin:0;padding:0;}
body{margin:0 auto}
.clear{ clear:both;}
a{color:#333;text-decoration:none;}
a:hover{text-decoration:underline;}
li{list-style-type:none;}
img{width:auto;max-width:100%;}
.main{width:1200px;margin:0 auto;overflow:visible;}
.content12{width:1200px;margin:0 auto;}
.daohang ul{
width:1200px;background:#000080;float:left;
}
.daohang ul li{float:left;
width:100px;padding:10px 0px; text-align:center;height:40px;line-height:40px;color:#ffffff;position: relative; }
.daohang ul li a{
color:#fff;}
.daohang li:hover a{
color:#fff;}
.daohang ul li.active{
}
.content8{width:800px;float:left;}
.ajsl
{
width:800px;}
.ajsl img
{
margin-top:10px;
margin-bottom:10px;
width:790px;
float:left;
}
.ajsl .desc
{
padding:10px;
text-align:left;
}
.ajsl .img
{
float:left;
width:240px;margin:10px;height:200px;
}
.dibu .desc
{
text-align:center;color:#ffffff;
background:#000080;padding:20px 0px;
margin-top:10px;
}
.dibu img
{
}
.guanlizeren .text
{
width:1200px;float:left;
margin-top:10px;
}
.guanlizeren .img
{
width:580px;padding:0px 5px;
height:410px;float:left;
}
.guanlizeren img
{
width:580px;height:410px;}
.guanlizeren .slist
{
text-align:center;
}
.guanlizeren .simg
{
height:400px;width:1160px;margin:10px;
float:left;
}
.guanlizeren .desc
{
width:580px;height:400px;overflow:hidden;float:left;
text-align:left;
padding:5px;
}
.xiaochuyinhuanliebiao ul
{
width:1200px;float:left;
}
.xiaochuyinhuanliebiao ul li
{
width:1180px;
padding:10px;
float:left;
}
.xiaochuyinhuanliebiao ul li .img
{
width:344px;padding:0px 5px;
height:210px;float:left;
}
.xiaochuyinhuanliebiao ul li img
{
width:344px;height:210px;}
.xiaochuyinhuanliebiao ul li .desc
{
width:816px;height:200px;overflow:hidden;float:left;
text-align:left;
padding:5px;
}
.xiaochuyinhuanliebiao ul li .title{margin:10px 0px;
}
.anquanchangshiliebiao ul
{
width:1200px;float:left;
}
.anquanchangshiliebiao ul li
{
width:1180px;
padding:10px;
float:left;
}
.anquanchangshiliebiao ul li .img
{
width:344px;padding:0px 5px;
height:210px;float:left;
}
.anquanchangshiliebiao ul li img
{
width:344px;height:210px;}
.anquanchangshiliebiao ul li .desc
{
width:816px;height:200px;overflow:hidden;float:left;
text-align:left;
padding:5px;
}
.anquanchangshiliebiao ul li .title{margin:10px 0px;
}
.yingduifangfaliebiao ul
{
width:1200px;}
.yingduifangfaliebiao ul li{
width:380px;
float:left;
padding:10px;
text-align:left;
}
.yingduifangfaliebiao ul li:hover{
}
.yingduifangfaliebiao ul li img
{
width:380px;height:300px;display:block;
}
.yingduifangfaliebiao ul li .text{
}
.yingduifangfaliebiao ul li .desc{
padding:10px 0px;
}
.yingduifangfaliebiao ul li .title{
font-weight:bold;
padding-top:10px;
font-size:16px;
.liuyanbiaodan button{
margin:10px 0px 0px 10px;
text-align:center;
line-height:40px;height:40px;line-height:40px;border-bottom-color:#999999;border-bottom-style:solid;border-bottom-width:1px;border-top-color:#999999;border-top-style:solid;border-top-width:1px;border-left-color:#999999;border-left-style:solid;border-left-width:1px;border-right-color:#999999;border-right-style:solid;border-right-width:1px;background:#000000;color:#ffffff;
}
.liuyanbiaodan .list{
margin-bottom:10px;
float: left;
}
.liuyanbiaodan .form{
width:268px;border-radius:25px;
padding:15px;
margin:0 auto;
}
.liuyanbiaodan .input{
width:212px;float:left;
}
.liuyanbiaodan .checkbox{
width:auto;
}
.liuyanbiaodan .radio{
width:auto;
}
.liuyanbiaodan .select{
width:212px;float:left;
}
.liuyanbiaodan .textarea{
width:212px;height:130px;
float:left;
}
.liuyanbiaodan .file{
width:auto;
border:0px;
}
.liuyanbiaodan .submit{
width:50.666666666667px;float:left;
}
.shipinzhanshi
{
text-align:center;
}
video{
width:1180px;
height:100%;;
object-fit:fill;
margin:10px;
}
.yonghubiaodan
{
width:1200px;overflow: hidden;
text-align:center;
}
.yonghubiaodan ul li
{
padding-left:10px;
margin-bottom:10px;
width:370px;margin-right:10px;
float:left;
}
.yonghubiaodan .list
{
border-bottom-color:#dddddd;border-bottom-style:solid;border-bottom-width:1px;border-top-color:#dddddd;border-top-style:solid;border-top-width:1px;border-left-color:#dddddd;border-left-style:solid;border-left-width:1px;border-right-color:#dddddd;border-right-style:solid;border-right-width:1px;
}
.yonghubiaodan form
{
line-height:40px;
}
.yonghubiaodan select{
width:380px;text-align:left;
margin:0px 10px;
overflow:hidden;
vertical-align:middle;
height:40px;height:40px;line-height:40px;
}
.yonghubiaodan checkbox,radio{
text-align:left;
margin:0px 10px;
overflow:hidden;
vertical-align:middle;
height:40px;height:40px;line-height:40px;
}
.yonghubiaodan input{
width:280px;text-align:left;
margin:0px 10px;
overflow:hidden;
vertical-align:middle;
height:40px;line-height:40px;}
.yonghubiaodan textarea{
width:250px;text-align:left;
margin:0px 0px;
overflow:hidden;
vertical-align:middle;
font-size: 16px;
height:100px;
}
.yonghubiaodan .title
{
margin:0px 10px;
}
.yonghubiaodan button{
width:100%;
text-align:center;
margin:0px 5px;
line-height:42px;height:42px;line-height:42px;background:#000000;color:#ffffff;
}
四、🎁更多源码
【干货分享】自学编程的小伙伴可以前往我的 gitee 仓库（持续更新中...）
📕【web学习指南】从web基础、计算机基础到前端常用框架的教程，涵盖前端大部分必备知识（学习指南 + 技术文章 + 资源分享）
