web前端html+css基础项目实例

来源：傻逼张章章发布时间：2018-11-22 14:19:33 阅读量：1103

<!--

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<span>

</span>

<span>

</span>

</div>

</div>

</div>

<table>

<tr>

</td>

</td>

</tr>

</table>

</form>

</div>

</div>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

</div>

</div>

<p>

HTML+CSS是web前端开发基础课程，本章将由麦子学院资深web前端开发工程师为你全面讲解HTML和css的基本属性和用法，带你进入web前端开发的世界

</p>

<p>

HTML+CSS是web前端开发基础课程，本章将由麦子学院资深web前端开发工程师为你全面讲解HTML和css的基本属性和用法，带你进入web前端开发的世界

</p>

<p>

HTML+CSS是web前端开发基础课程，本章将由麦子学院资深web前端开发工程师为你全面讲解HTML和css的基本属性和用法，带你进入web前端开发的世界

</p>

</div>

</div>

<ul>

<h3>Web前端开发入门</h3>

<p>网页开发，麦子学院监制麦子学院监制麦子学院监制vv麦子学院监制vv......</p>

</a>

</li>

<li>

<h3>Web前端开发入门</h3>

</a>

</li>

<li>

<h3>Web前端开发入门</h3>

</a>

</li>

<li>

<h3>Web前端开发入门</h3>

</a>

</li>

<li>

<h3>Web前端开发入门</h3>

</a>

</li>

<li>

<h3>Web前端开发入门</h3>

</a>

</li>

<li>

<h3>Web前端开发入门</h3>

</a>

</li>

<li>

<h3>Web前端开发入门</h3>

</a>

</li>

</ul>

</div>

</div>

<ul>

<li><a href="http://www.baidu.com" target="_blank"><img src="images/chanpin_c.png" alt="产品"/><span>Web前端开发入门</span></a></li>

</ul>

</div>

</span>

</span>

</div>

<p>

友情链接: <a href="http://www.baidu.com" target="_blank">关于我们</a> <a href="http://www.baidu.com" target="_blank">关于我们</a> <a href="http://www.baidu.com" target="_blank">关于我们</a>

</p>

</div>

</body>

</html>

--！>

CSS文件

margin:0; /* * 通用样式，所有的！距离顶距离可在浏览器f12界面分布观看*/

}

body{

font: 14px/24px "微软雅黑","宋体"

}

.wp{

width:960px;

margin:0 auto; /*居中*/

border:none;

}

.ww{

margin-left:150px;

}

.z{

float:left; /*左浮动*/

}

.y{

float:right; /*有浮动*/

}

.cl{

clear:both;

}

img{

border:none;

}

.top{

width:100%;

height:24px;

line-height:24px;

background:#303030;

color:#d8d8d8;

}

.top span{

margin-right:15px;

}

.top span.mr0{

margin:0;

}

.top a{

color:#d8d8d8;

text-decoration:none;

}

.top a:hover{

color:#f60;

}

.logos {

height:100px;

}

.sousuo{

width:350px;

height:41px;

margin-top:40px;

}

.sousuo td{

height:41px;

}

.dianhua{

margin-top:-27px;

}

.s_z{

width:6px;

background:url("images/s_z.png") no-repeat;

margin-top:2px;

margin-right:-2px;

}

.s_c{

width:240px;

background:url("images/s_z.png") repeat-x; /*repeat重复方式*/

margin-top:2px;

}

.s_y{

width:78px;

background:url("images/sousuo.png") no-repeat;

margin-top:2px;

}

.s_c input{

height:34px;

width:238px;

line-height;34px;

border:none;

margin-top:2px;

margin-bottom:2px;

}

.s_y button{

width:78px;

height:41px;

background:none;

border:0;

cursor:pointer; /*鼠标滑过变成小手*/

}

.dianhua span{

font-size:26px;

color:darkred;

}

.nav{

height:39px;

width:100%;

background:url("images/bg_nav.png") repeat-x;

}

.nav li{

list-style:none;

float:left;

line-height:39px;

padding:0 28px;

}

.nav li:hover{

background:url("images/li_hover.png") repeat-x;

margin-top:-2px;

border:none;

}

.nav a{

color:#FFF;

font-size:16px;

text-decoration:none;

}

.tit{ /*创建下划线*/

padding-bottom:5px;

border-bottom:1px solid darkred;

position:relative;

margin-bottom:10px;

}

.tit span{

position:absolute;

right:0;

bottom:0;

}

.tit a{

color:darkred;

text-decoration:none;

}

.jianjie{

width:540px;

height:350px;

margin-right:20px;

}

.jj_c img{

float:left;

margin:0 10px 10px 0; /* 上右下左*/

}

.jj_c p{

color:rgb(140,140,140);

text-indent:24px;

}

.xinwen{

width:400px;

height:350px;

}

.chanpin{

width:100%;

height:400px;

}

.ad{

margin-bottom:10px;

}

.xw_c{

}

.xw_c h3{

font-weight:normal;

font-size:14px;

}

.xw_c li{

list-style:none;

height:24px;

line-height:24px;

position:relative;

padding-left:15px; /*左边缩进15个像素*/

background:url("images/list_bg.png") no-repeat center left;

}

.xw_c li:hover{

background-color:red;

}

.xw_c li.a{

background:none;

padding:0;

height:80px;

}

.xw_c li img{

float:left;

margin:0 10px 0 0;

}

.xw_c a{

color:#616161;

text-decoration:none;

}

.xw_c p{

font-size:12px;

color:#888;

text-indent:24px;

}

.xw_c span{

position:absolute;

right:0;

bottom:0;

font-size:12px;

color:#888888;

}

.cp_c{

}

.cp_c li{

float:left;

list-style:none;

margin:0 20px 10px 0;

width:200px;

height:150px;

overflow:hidden;

position:relative;

}

.cp_c span{

display:none; /*显示隐藏*/

position:absolute;

bottom:0;

width:200px;

left:0;

font-size:14px;

height:20px;

padding:0 10px;

color:#fff;

background:darkred;

overflow:hidden; /*溢出处理，溢出隐藏*/

}

.cp_c li:hover span{

display:block;

}

.cp_c li img{

float:left;

}

.footer{

height:100px;

width:100%;

background:url("images/footer_bg.png") repeat-x;

}

.footer_top{

height:80px;

line-height:80px;

color:#fff;

}

.footer_top a{

color:#fff;

text-decoration:none;

}

.footer_top .z{

font-size:18px;

}

.footer_top .y{

font-size:12px;

}

.footer_bottom{

}

.footer_bottom p{

color:white;

}

.footer_bottom a{

color:#888;

margin-right:10px;

text-decoration:none;

}

.footer_bottom a:hover{

color:white;

}

效果展示

---------------------

标签： PHP

评论：

你还没有登录，请先

客服在线

13450931319