時(shí)間：2023-07-23 19:00:02 | 來源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-07-23 19:00:02 來源：網(wǎng)站運(yùn)營(yíng)
教大家怎么寫一個(gè)網(wǎng)站的頭部菜單以及輪播圖和廣告附源碼和素材：教大家怎么寫一個(gè)網(wǎng)站的頭部，菜單，以及輪播圖和廣告，源碼和素材以及知識(shí)點(diǎn)的詳細(xì)注釋我都發(fā)博客了～<!DOCTYPE html>css源碼
<html>
<head>
<meta charset="UTF-8">
<title>果真惠萬-首頁</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<!-- 頁面頂部 -->
<div>
<div>
<div class="welcome fl">歡迎來到果真惠萬!</div>
<div class="user_con fr">
<ul class="login_btns fl">
<li><a href="#">登錄</a></li>
<li><span>|</span></li>
<li><a href="#">注冊(cè)</a></li>
</ul>
<div class="user_info fl">
歡迎您：<em>理想國(guó)真惠玩</em>
</div>
<ul class="user_btns fl">
<li><span>|</span></li>
<li><a href="#">我的購物車</a></li>
<li><span>|</span></li>
<li><a href="#">我的訂單</a></li>
</ul>
</div>
</div>
</div>
<!-- logo、搜索框、購物車 -->
<div>
<a href="index.html" class="logo fl"><img src="images/logo_lxgg.jpg" alt="果真惠萬網(wǎng)站logo"></a>
<div class="search_con fl">
<form>
<input type="text" name="" class="input_txt fl" placeholder="搜索">
<input type="submit" name="" class="input_sub fl" value="搜索">
</form>
</div>
<div class="chart_con fr">
<a href="#" class="chart_link fl">我的購物車</a>
<div class="chart_num fl">5</div>
</div>
</div>
<!-- 主菜單 -->
<div>
<div>
<h2>全部商品分類</h2>
<ul>
<li><a href="">首頁</a></li>
<li><a href="">手機(jī)生鮮</a></li>
<li><a href="">抽獎(jiǎng)</a></li>
</ul>
</div>
</div>
<!-- 二級(jí)菜單、幻燈片、廣告 -->
<div>
<ul class="sub_menu_con fl">
<li><a href="">新鮮水果</a></li>
<!--寬198,高44-->
<!--(li>a{新鮮水果})*6-->
<li><a href="">新鮮水果</a></li>
<li><a href="">海鮮水產(chǎn)</a></li>
<li><a href="">豬牛羊肉</a></li>
<li><a href="">新鮮水果</a></li>
<li><a href="">新鮮水果</a></li>
</ul>
<!--輪播圖列表-->
<div class="slide_con fl">
<ul>
<li><a href=""><img src="images/slide.jpg" alt="幻燈片"/></a></li>
<li><a href=""><img src="images/slide.jpg" alt="幻燈片"/></a></li>
<li><a href=""><img src="images/slide.jpg" alt="幻燈片"/></a></li>
<li><a href=""><img src="images/slide.jpg" alt="幻燈片"/></a></li>
<li><a href=""><img src="images/slide.jpg" alt="幻燈片"/></a></li>
<li><a href=""><img src="images/slide.jpg" alt="幻燈片"/></a></li>
</ul>
<!--左右箭頭 單獨(dú)的div或者a標(biāo)簽-->
<div></div>
<div></div>
<!--輪播圖的小圓點(diǎn)-->
<ul>
<!--標(biāo)記激活狀態(tài)-->
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!--兩個(gè)廣告圖片-->
<div class="advs fl">
<a href="#"><img src="images/adv1.jpg" alt="廣告圖片"></a>
<a href="#"><img src="images/adv2.jpg" alt="廣告圖片"></a>
</div>
</div>
</body>
</html>
/*頁面頂部的樣式*/關(guān)于css樣式,需要重置一下HTML的默認(rèn)樣式,源碼如下
body {
font-family: "Microsoft YaHei";
font-size: 14px;
}
/*頭部的底框*/
.header_con {
height: 29px;
background-color: #f7f7f7;
border-bottom: 1px solid #dddddd;
}
/*頭部的頁面寬度以及頁面自動(dòng)居中*/
.header {
width: 1200px;
height: 29px;
margin: 0 auto;
}
/*歡迎文字的樣式*/
.welcome {
font-size: 12px;
color: #666666;
line-height: 29px;
}
.user_con {
}
/*用戶信息*/
.user_info {
display: none;
font-size: 12px;
line-height: 29px;
color: #666666;
}
.user_info em {
color: #ff8800;
}
/*設(shè)置左浮動(dòng) 讓用戶信息以行展示*/
.login_btns li, .user_btns li {
float: left;
height: 29px;
}
/*修改用戶信息的字體顏色,樣式*/
.login_btns a, .login_btns span, .user_btns a, .user_btns span {
display: block;
line-height: 29px;
font-size: 12px;
color: #666666;
}
/*修改用戶信息的間距*/
.login_btns span, .user_btns span {
color: #cecece;
margin: 0 10px;
}
/*鼠標(biāo)進(jìn)入的顏色*/
.login_btns a:hover, .user_btns a:hover {
color: #ff8800;
}
/*logo,搜索框,購物車的樣式*/
.center_con {
width: 1200px;
height: 115px;
margin: 0 auto;
}
.logo {
margin: 29px 0 0 17px;
}
/*搜索框樣式*/
.search_con {
width: 616px;
height: 38px;
margin: 34px 0 0 124px;
border: 1px solid #37ab40;
background: url("../images/icons.png") 10px 10px no-repeat;
}
/*設(shè)置輸入框樣式*/
.search_con .input_txt {
margin-left: 36px;
width: 480px;
height: 38px;
border: 0px;
/*去掉獲得焦點(diǎn)時(shí)顯示的藍(lán)色的框*/
outline: none;
}
/*搜索圖標(biāo)樣式*/
.search_con .input_sub {
width: 100px;
height: 38px;
background-color: #37ab40;
border: 0px;
font-size: 14px;
color: #ffffff;
cursor: pointer;
}
/*購物車*/
.chart_con{
width: 200px;
height: 40px;
margin-top: 34px;
}
/*購物車圖標(biāo)*/
.chart_link{
width: 158px;
height: 38px;
border: 1px solid #dddddd;
background: url("../images/icons.png") 12px -42px no-repeat #f7f7f7;
text-indent: 56px;
line-height: 38px;
font-size: 14px;
color: #37ab40;
}
.chart_num{
width: 40px;
height: 40px;
background-color: #ff8800;
text-align: center;
font: bold 18px/40px "Microsoft YaHei";
color: #ffffff;
}
/*主菜單樣式*/
.main_menu_con{
height: 40px;
border-bottom: 2px solid #39a93e;
}
.center_con02{
width: 1200px;
height: 40px;
margin: auto 0;
}
/*主菜單標(biāo)題樣式*/
.center_con02 h2{
float: left;
width: 200px;
height: 40px;
background-color: #39a93e;
text-align: center;
font: normal 14px/40px "Microsoft YaHei";
color: #ffffff;
}
.center_con02 li{
height: 40px;
float: left;
}
.center_con02 ul{
float: left;
overflow: hidden;
}
.center_con02 li a{
display: block;
height: 14px;
padding: 0 20px;
margin-top: 13px;
margin-left: -1px;
border-left: 1px solid #666666;
color: #666666;
}
.center_con02 li a:hover{
color: #ff8800;
}
/*輪播圖菜單整體樣式*/
.center_con03{
width: 1200px;
height: 270px;
margin: 0 auto;
}
.sub_menu_con{
width: 200px;
height: 270px;
}
/*輪播菜單列表樣式*/
.sub_menu_con li{
width: 198px;
height: 44px;
border: 1px solid #eeeeee;
border-top: 0px;
/*列表里面的箭頭*/
background: url("../images/icons.png") 178px -384px no-repeat;
}
.sub_menu_con li a{
display: block;
height: 44px;
/*設(shè)置垂直居中*/
line-height: 44px;
text-indent: 71px;
color: #333333;
/*設(shè)置圖標(biāo)*/
background: url("../images/icons.png") 33px -90px no-repeat;
}
/*鼠標(biāo)移動(dòng)上去一行顏色改變*/
.sub_menu_con li a:hover{
color: #ff8800;
}
/*利用雪碧圖為每一個(gè)菜單項(xiàng)設(shè)置不同的圖標(biāo)*/
.sub_menu_con li .icon02{
background-position: 31px -140px;
}
.sub_menu_con li .icon03{
background-position: 33px -190px;
}
.sub_menu_con li .icon04{
background-position: 35px -240px;
}
.sub_menu_con li .icon05{
background-position: 33px -290px;
}
.sub_menu_con li .icon06{
background-position: 33px -340px;
}
/*幻燈片樣式*/
.slide_con{
width: 760px;
height: 270px;
background-color: pink;
position: relative;
/*讓因?yàn)楦?dòng)而溢出的圖片隱藏*/
overflow: hidden;
}
/*設(shè)置輪播圖整個(gè)圖片的寬高和定位*/
.slide_con .slide{
position: absolute;
width: 4560px;
height: 270px;
left: 0;
top: 0;
}
/*讓每一個(gè)圖片都浮動(dòng)起來*/
.slide_con .slide li{
/*通過js調(diào)用left的值能夠?qū)崿F(xiàn)幻燈片的效果*/
float: left;
}
/*左右切換的箭頭*/
.prev, .next{
position: absolute;
width: 15px;
height: 24px;
/*利用雪碧圖來做背景*/
background: url("../images/icons.png") left -450px no-repeat;
/*相對(duì)于父元素絕對(duì)定位 初始化為左上角*/
left: 0;
top: 0;
/*設(shè)置鼠標(biāo)的形狀為手*/
cursor: pointer;
}
/*通過調(diào)整偏移值,實(shí)現(xiàn)背景圖的變換*/
.prev{
left: 11px;
top: 122px;
}
.next{
background-position: left -500px;
left: 732px;
top: 122px;
}
/*廣告牌*/
.advs{
width: 240px;
height: 270px;
background-color: lightgreen;
}
/*小圓點(diǎn)*/
.points{
position: absolute;
width: 100%;
height: 11px;
left: 0;
bottom: 9px;
font-size: 0;
text-align: center;
}
.points li{
display: inline-block;
width: 11px;
height: 11px;
background-color: #9f9f9f;
margin: 0 5px;
border-radius: 50%;
cursor: pointer;
}
/*設(shè)置激活狀態(tài)的樣式*/
.points .active{
background-color: #cecece;
}
/*解決3像素空白的bug*/
.advs img{
display: block;
}
/* 將標(biāo)簽?zāi)J(rèn)的間距設(shè)為0 */關(guān)于圖片,由于無法上傳附件,只能大家自己根據(jù)樣式添加自己的圖片咯,或者去我的博客(網(wǎng)址是http://lxgyx.com)下載也行~
body, p, h1, h2, h3, h4, h5, h6, ul, dl, dt, form, input {
margin: 0;
padding: 0;
}
/* 去掉默認(rèn)的小圓點(diǎn) */
ul {
list-style: none;
}
/* 去掉默認(rèn)的下劃線 */
a {
text-decoration: none;
}
/* 設(shè)置不傾斜 */
em {
font-style: normal;
}
/* 去掉在IE下圖片做鏈接時(shí)生成的邊框 */
img {
border: 0px;
}
/* 讓h標(biāo)簽繼承body中的字體大小的設(shè)置 */
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
}
/* 清除浮動(dòng)、解決margin-top塌陷 */
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
.fl {
float: left;
}
.fr {
float: right;
}
關(guān)鍵詞：廣告,素材
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
在線咨詢