大學(xué)生如何設(shè)計(jì)網(wǎng)頁?
時(shí)間：2023-12-12 14:24:01 | 來源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-12-12 14:24:01 來源：網(wǎng)站運(yùn)營(yíng)
大學(xué)生如何設(shè)計(jì)網(wǎng)頁?：現(xiàn)在來干貨，直接上源碼，由于文字限制問題只能發(fā)一部分，有看不明白的可以隨時(shí)問我
<body>
<div class="back">
<div class="navbox">
<div class="nav">
<div class="logo"><a href="#"><img src="image/coke.png"></a></div>
<ul>
<li><a href="#"><img src="image/nav-1.png"><br />首頁</a></li>
<li><a href="#"><img src="image/nav-2.png"><br />可樂服務(wù)</a></li>
<li><a href="#"><img src="image/nav-3.png"><br />可樂案例</a></li>
<li><a href="#"><img src="image/nav-4.png"><br />可樂動(dòng)態(tài)</a></li>
<li><a href="#"><img src="image/nav-5.png"><br />關(guān)于可樂</a></li>
<li><a href="#"><img src="image/nav-6.png"><br />聯(lián)系</a></li>
</ul>
</div>
</div>
<div class="banner">
<img style="display:block;" src="image/9k=.jpg">
<img src="image/2Q== (1).jpg">
<img src="image/2Q== (2).jpg">
<img src="image/2Q==.jpg">
<img src="image/2Q== (2).jpg">
</div>
<div class="cases">
<div class="title">
<span class="span1">coca-</span><br />
<span class="span2">cola</span>
</div>
<div class="casespic">
<ul>
<li style="background-image:url(image/01.jpg); background-repeat:no-repeat;"><a href="#"><span>佐治亞州亞特蘭大</span><span class="span2">1886.5.8</span></a></li>
<li style="background-image:url(image/02.jpg);background-repeat:no-repeat; margin-top:130px;"><a href="#"><span>婦女賦權(quán)</span><span class="span2">1917</span></a></li>
<li style="height:520px;">
<div style="background-image:url(image/03.jpg);background-repeat:no-repeat; width:200px; height:260px;"><a href="#"><span>Minute Maid</span><span class="span2">1960 </span></a></div>
<div style="background-image:url(image/04.jpg);background-repeat:no-repeat; width:200px; height:260px;"><a href="#"><span>制作“山頂”</span><span class="span2">1960</span></a></div>
</li>
<li style="background-image:url(image/05.jpg); background-repeat:no-repeat;margin-top:130px;"><a href="#"><span>可口可樂的第一瓶</span><span class="span2">1915</span></a></li>
<li style="background-image:url(image/06.jpg);background-repeat:no-repeat;"><a href="#"><span>可樂125年廣告</span><span class="span2">2019.04.24</span></a></li>
</ul>
</div>
</div>
CSS樣式區(qū)域
*{margin:0; padding:0; font-family:"微軟雅黑";}
a{text-decoration:none;}
li{list-style:none;}
body{background-color:#dcdcdc;}
.back{margin-left:auto; margin-right:auto; width:100%;}
.navbox{background-color:#F00; width:100%; height:100px; border-top:solid 3px #00a0e9;}
.nav{width:1200px; height:100px; background-color:#F00; margin-left:auto; margin-right:auto;}
.logo{margin-left:150px; margin-top:20px; float:left;}
.nav ul{float:left; margin-left:150px;}
.nav li{width:100px; float:left; text-align:center;}
.nav li a{color:#ffffff; font-size:16px; display:block; height:80px; padding-top:20px; line-height:30px;}
.nav li a:hover{background-image:url(image/nav-fontback.png); background-position:center; background-repeat:no-repeat;}
.banner{position:relative; width:100%; height:500px; margin-left:auto; margin-right:auto;}
.banner img{display:none; width:100%; height:400px;}
.banner a{position:absolute; display:block; width:30px; height:30px; top:450px; background-image:url(image/banner-black.png);}
.nowa{background-image:url(image/banner-white.png);}
.banner a:hover{background-image:url(image/banner-white.png);}
.title{width:150px; border-top:solid 3px #00a0e9; margin-left:auto; margin-right:auto; margin-top:40px; color:#373737; text-align:center;}
.title .span1{font-family:Helvetica Light; font-size:48px;}
.title .span2{font-size:30px;}
.casespic ul{overflow:hidden; width:1000px; margin-left:auto; margin-right:auto; margin-top:20px;}
.casespic li{width:200px; height:260px; float:left;}
.casespic li a{background-color:rgba(0, 0, 0, 0.5); height:130px; width:200px; display:block;}
.casespic li a span{font-size:24px; color:#FFF; text-align:center; display:block; line-height:60px;}
.casespic .span2{margin-left:auto; margin-right:auto;font-size:18px; width:120px; border-top:solid 2px #FFFFFF;}
.casespic li a:hover{height:254px; width:194px; border:solid 3px #00a0e9;}
.casespic li a span:hover{line-height:120px; color:#00a0e9;}
.about{margin-top:50px; overflow:hidden; width:1200px;; margin-left:auto; margin-right:auto;}
.aboutpic{float:left;}
.aboutpic img{width:600px;height:400px;}
.aboutus{float:left; width:600px; height:400px; background-color:#FFF;}
.aboutus p{width:500px; margin-left:auto; margin-right:auto; font-size:18px; color:#373737; margin-top:40px; line-height:30px;}
.aboutus a{width:150px; height:40px; background-image:url(image/about-more.png); display:block; text-align:center; font-size:30px;font-family:Helvetica Light; color:#F00; margin-left:auto; margin-right:auto; margin-top:10px;}
.newstext{width:1000px; background-color:#FFF; margin-left:auto; margin-right:auto; margin-top:15px; overflow:hidden;}
.newsleft{background-image:url(image/news-1.png); width:250px; height:350px; float:left;}
.newsleft a{background-color:rgba(0,160,233,0.5); width:250px; height:150px; margin-top:200px; display:block; padding-top:20px;}
.newsleft a span{text-align:left; display:block;font-size:20px;width:200px; margin-left:auto; margin-right:auto; color:#FFF; line-height:20px;}
.newsleft a:hover{height:350px; margin-top:0;}
.newsright{float:right;width:750px; height:350px;}
.newsright dl{width:750px; overflow:hidden; border-bottom:solid 1px #b9b9b9;}
.newsright dl a:hover{background-color:#00a0e9; color:#FFF;}
.newsright dd a{width:60px; height:60px;float:right; display:block; background-repeat:no-repeat; background-position:center; background-color:#FFF; border:solid 1px #b9b9b9; border-bottom:none; border-top:none;}
.newsright dl img{ margin-top:13px; margin-left:21px;display:block;}
.newsright dl img:hover{display:none;}
.newsright dt a{width:100px; height:60px; font-size:24px;font-family:Helvetica Light; text-align:center; float:right;background-color:#FFF;line-height:60px; color:#959595;}
.newsright ul{padding-left:30px;}
.newsright li{width:240px; height:290px; float:left;}
.newsright li span{width:40px; height:40px; display:block; border:solid 3px #00a0e9; margin-top:25px; text-align:left; font-size:18px; font-family:Arial; line-height:20px; padding:15px; color:#363636;}
.newsright li span:hover{background-color:#00a0e9; color:#FFF;}
.newsright li a{font-size:16px;color:#363636; margin-top:20px; display:block; width:200px;}
.newsright li p{font-size:14px;color:#777777;margin-top:20px; display:block; width:200px; line-height:20px;}
.title{width:150px; border-top:solid 3px #00a0e9; margin-left:auto; margin-right:auto; margin-top:40px; color:#373737; text-align:center;}
.title .span1{font-family:Helvetica Light; font-size:48px;}
.title .span2{font-size:30px;}
.team{width:1200px; margin-left:auto; margin-right:auto;}
.team ul{overflow:hidden; margin-top:10px;}
.team li{float:left; width:300px; height:250px; background-repeat:no-repeat; background-position:center;}
.team li span{text-align:center; font-size:30px; color:#FFF; line-height:80px;width:300px; height:200px; display:block; padding-top:50px; opacity:0;}
.team li span:hover{background-color:rgba(0,160,233,0.6); opacity:1;}
關(guān)鍵詞：設(shè)計(jì),大學(xué)生
在線咨詢