中山市原創(chuàng)動(dòng)力網(wǎng)絡(luò)科技有限公司
創(chuàng)您所想與您同在
免費(fèi)互聯(lián)網(wǎng)品牌營銷咨詢服務(wù)
立刻咨詢
13450931319來源： 傻逼張章章 發(fā)布時(shí)間：2018-11-22 14:19:33 閱讀量：1105
<!--
<!DOCTYPE html>
<html>
<head>
<title>三毛</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="header">
<div class="top">
<div class="wp">
<div class="z">
<span>
<a href="">設(shè)為首頁</a>
</span>
<span>
<a href="">收藏本站</a>
</span>
</div>
<div class="y">
<span>時(shí)間2016年3月1日</span>
<span class="mr0">天氣晴朗</span>
</div>
</div>
</div>
<div class="logos">
<div class="wp">
<div class="logo z">
<h1><a href="index.html"><img src="images/logo.png" alt="HTML+CSS實(shí)戰(zhàn)"></a></h1>
</div>
<div class="sousuo z">
<form action="index.html" method="get">
<table>
<tr>
<td class="s_z z"></td>
<td class="s_c z">
<input type="text" name="text" id="s_c_text"></input>
</td>
<td class="s_y z">
<button type="submit" name="submit"></button>
</td>
</tr>
</table>
</form>
</div>
<div class="dianhua y">
<span>客服熱線：090909090909</span>
</div>
</div>
</div>
<div class="nav">
<div class="ww">
<ul class="z">
<li class="a">
<a href="index.html">網(wǎng)站首頁</a>
</li>
<li>
<a href="index.html">公司簡介</a>
</li>
<li>
<a href="index.html">業(yè)務(wù)描述</a>
</li>
<li>
<a href="index.html">服務(wù)范圍</a>
</li>
<li>
<a href="index.html">產(chǎn)品中心</a>
</li>
<li>
<a href="index.html">人才管理</a>
</li>
<li>
<a href="index.html">在線留言</a>
</li>
<li>
<a href="index.html">聯(lián)系我們</a>
</li>
</ul>
</div>
</div>
</div>
<div class="center"></div>
<div class="ad wp">
<h1><a href="index.html"><img src="images/ad.png" alt="HTML+CSS實(shí)戰(zhàn)"></a></h1>
</div>
<div class="wp">
<div class="jianjie z">
<div class="tit">
<img src="images/jianjie.png" alt="簡介"/>
<span><a href="">More</a></span>
</div>
<div class="jj_c">
<img src="images/jianjie_c.png" alt="簡介"/>
<p>
HTML+CSS是web前端開發(fā)基礎(chǔ)課程，本章將由麥子學(xué)院資深web前端開發(fā)工程師為你全面講解HTML和css的基本屬性和用法，帶你進(jìn)入web前端開發(fā)的世界
</p>
<p>
HTML+CSS是web前端開發(fā)基礎(chǔ)課程，本章將由麥子學(xué)院資深web前端開發(fā)工程師為你全面講解HTML和css的基本屬性和用法，帶你進(jìn)入web前端開發(fā)的世界
</p>
<p>
HTML+CSS是web前端開發(fā)基礎(chǔ)課程，本章將由麥子學(xué)院資深web前端開發(fā)工程師為你全面講解HTML和css的基本屬性和用法，帶你進(jìn)入web前端開發(fā)的世界
</p>
</div>
</div>
<div class="xinwen z">
<div class="tit">
<img src="images/xinwen.png" alt="新聞"/>
<span><a href="">More</a></span>
</div>
<div class="xw_c">
<ul>
<li class="a">
<a href="http://www.baidu.com">
<img src="images/xinwen_c.png" alt="新聞"/>
<h3>Web前端開發(fā)入門</h3>
<p>網(wǎng)頁開發(fā)，麥子學(xué)院監(jiān)制麥子學(xué)院監(jiān)制麥子學(xué)院監(jiān)制vv麥子學(xué)院監(jiān)制vv......</p>
</a>
</li>
<li>
<a href="http://www.baidu.com">
<h3>Web前端開發(fā)入門</h3>
<span>2016-03-02</span>
</a>
</li>
<li>
<a href="http://www.baidu.com">
<h3>Web前端開發(fā)入門</h3>
<span>2016-03-02</span>
</a>
</li>
<li>
<a href="http://www.baidu.com">
<h3>Web前端開發(fā)入門</h3>
<span>2016-03-02</span>
</a>
</li>
<li>
<a href="http://www.baidu.com">
<h3>Web前端開發(fā)入門</h3>
<span>2016-03-02</span>
</a>
</li>
<li>
<a href="http://www.baidu.com">
<h3>Web前端開發(fā)入門</h3>
<span>2016-03-02</span>
</a>
</li>
<li>
<a href="http://www.baidu.com">
<h3>Web前端開發(fā)入門</h3>
<span>2016-03-02</span>
</a>
</li>
<li>
<a href="http://www.baidu.com">
<h3>Web前端開發(fā)入門</h3>
<span>2016-03-02</span>
</a>
</li>
</ul>
</div>
</div>
<div class="chanpin z">
<div class="tit">
<img src="images/chanpin.png" alt="產(chǎn)品"/>
<span><a href="">More</a></span>
</div>
<div class="cp_c">
<ul>
<li><a href="http://www.baidu.com" target="_blank"><img src="images/chanpin_c.png" alt="產(chǎn)品"/><span>Web前端開發(fā)入門</span></a></li>
<li><a href="http://www.baidu.com" target="_blank"><img src="images/chanpin_c.png" alt="產(chǎn)品"/><span>Web前端開發(fā)入門</span></a></li>
<li><a href="http://www.baidu.com" target="_blank"><img src="images/chanpin_c.png" alt="產(chǎn)品"/><span>Web前端開發(fā)入門</span></a></li>
<li><a href="http://www.baidu.com" target="_blank"><img src="images/chanpin_c.png" alt="產(chǎn)品"/><span>Web前端開發(fā)入門</span></a></li>
<li><a href="http://www.baidu.com" target="_blank"><img src="images/chanpin_c.png" alt="產(chǎn)品"/><span>Web前端開發(fā)入門</span></a></li>
<li><a href="http://www.baidu.com" target="_blank"><img src="images/chanpin_c.png" alt="產(chǎn)品"/><span>Web前端開發(fā)入門</span></a></li>
<li><a href="http://www.baidu.com" target="_blank"><img src="images/chanpin_c.png" alt="產(chǎn)品"/><span>Web前端開發(fā)入門</span></a></li>
<li><a href="http://www.baidu.com" target="_blank"><img src="images/chanpin_c.png" alt="產(chǎn)品"/><span>Web前端開發(fā)入門</span></a></li>
</ul>
</div>
</div>
</div>
<div class="cl"></div>
<div class="footer">
<div class="wp">
<div class="footer_top">
<span class="z">
<a href="">關(guān)于我們</a> | <a href="">聯(lián)系我們</a> | <a href="">加入我們</a> | <a href="">留言我們</a></a>
</span>
<span class="y">
@2015麥子學(xué)院版權(quán)所有ICP正:蜀ICP備1300000000號-1
</span>
</div>
<div class="footer_bottom">
<p>
友情鏈接: <a href="http://www.baidu.com" target="_blank">關(guān)于我們</a> <a href="http://www.baidu.com" target="_blank">關(guān)于我們</a> <a href="http://www.baidu.com" target="_blank">關(guān)于我們</a>
</p>
</div>
</div>
</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; /*左浮動(dòng)*/
}
.y{
float:right; /*有浮動(dòng)*/
}
.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重復(fù)方式*/
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; /*鼠標(biāo)滑過變成小手*/
}
.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{ /*創(chuàng)建下劃線*/
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; /*左邊縮進(jìn)15個(gè)像素*/
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;
}
效果展示
---------------------
微信登錄
QQ登錄
微博登錄
售前咨詢
