CSS樣式表——佈局練習（製作360網頁）

weixin_33831673發表於2015-12-25

以製作360網頁為例（只做到了靜態網頁）

提綱：1.總共分為7部分

懸浮窗:

原始碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<link href="360網頁css第二遍.css" rel="stylesheet" type="text/css" />
</head>

</div>

<div id="左中">
<table height="120px" width="230px" cellpadding="0">
<tr><td><img src="360小圖示/左中廣告.png" height="60px" width="230px"/></td></tr>
<tr><td>子韜楊冪遊戲秀恩愛單身狗哭了</td></tr>
<tr><td>裝備靠打，玩就知道</td></tr>
</table>
</div>

<div id="左下">
<div id="左下分1">
<table height="30px" width="230px">
<tr><td align="left">猜你愛看</td><td align="right">換一下</td></tr>
</table>
</div>
<div id="左下分2">
<table height="30px" width="230px">
<tr align="center">
<td>頭條</td><td>八卦</td><td>正能量</td><td>軍事</td>
</tr>
</table>
</div>
<div id="左下圖片"><img src="360小圖示/左下廣告.png" /></div>
<div id="左下分3">
<table height="30px"; width="230px">
<tr><td>工信部稱完成提速降費年度目標</td></tr>
</table>
</div>
<div id="左下分4">
<table height="30px"; width="230px">
<tr><td>現金紅包免費送亞洲新樓王</td></tr></table>
</div>
</div>

<div id="右上">
<table height="360px" width="760px" cellpadding="10">
<tr align="center">

<td><a href="http://www.people.com.cn">好搜</a><span>•</span><a href="http://www.xinhuanet.com">360商城</a></td>
<td><a href="http://www.people.com.cn">新浪</a><span>•</span><a href="http://www.xinhuanet.com">微博</a></td>
<td><a href="http://www.people.com.cn">天貓</a><span>•</span><a href="http://www.xinhuanet.com">聖誕狂歡</a></td>
<td><a href="http://www.people.com.cn">搜狐</a><span>•</span><a href="http://www.xinhuanet.com">視訊</a></td>
<td><a href="http://www.people.com.cn">網易</a><span>•</span><a href="http://www.xinhuanet.com">郵箱</a></td>
<td><a href="http://www.people.com.cn">鳳凰</a><span>•</span><a href="http://www.xinhuanet.com">軍事</a></td>
</tr>
<tr align="center">
<td><a href="http://www.people.com.cn">360遊戲</a></td>
<td><a href="http://www.people.com.cn">淘寶網</a></td>
<td><a href="http://www.people.com.cn">購物</a><span>•</span><a href="http://www.xinhuanet.com">團購</a></td>
<td><a href="http://www.people.com.cn">百度</a><span>•</span><a href="http://www.xinhuanet.com">熱搜</a></td>
<td><a href="http://www.people.com.cn">360</a><span>•</span><a href="http://www.xinhuanet.com">手機衛士</a></td>
<td><a href="http://www.people.com.cn">攜程旅遊</a></td>

</tr>
<tr align="center">

<td><a href="http://www.people.com.cn">愛淘寶</td>
<td><a href="http://www.people.com.cn">360影視</a></td>
<td><a href="http://www.people.com.cn">聚划算</td>
<td><a href="http://www.people.com.cn">國美線上</a></td>
<td><a href="http://www.people.com.cn">東財</a><span>•</span><a href="http://www.xinhuanet.com">理財</a></td>
<td><a href="http://www.people.com.cn">央視網</a><span>•</span><a href="http://www.xinhuanet.com">直播</a></td>
</tr>
<tr align="center">

<td><a href="http://www.people.com.cn">人民</a><span>•</span><a href="http://www.xinhuanet.com">新華</a></td>
<td><a href="http://www.people.com.cn">人民</a><span>•</span><a href="http://www.xinhuanet.com">新華</a></td>
<td><a href="http://www.people.com.cn">人民</a><span>•</span><a href="http://www.xinhuanet.com">新華</a></td>
<td><a href="http://www.people.com.cn">人民</a><span>•</span><a href="http://www.xinhuanet.com">新華</a></td>
<td><a href="http://www.people.com.cn">人民</a><span>•</span><a href="http://www.xinhuanet.com">新華</a></td>
<td><a href="http://www.people.com.cn">人民</a><span>•</span><a href="http://www.xinhuanet.com">新華</a></td>
</tr>
<tr align="center">
<td><a href="http://www.autohome.com.cn">汽車之家</a></td>
<td><a href="http://zibo.bitauto.com">易車網</a></td>
<td><a href="http://www.pcauto.com.cn">太平洋汽車</a></td>
<td><a href="http://www.anjuke.com">安居客</a></td>
<td><a href="http://out.zhe800.com">折800</a></td>
<td><a href="http://www.suning.com"><font color="#00CC33">蘇寧易購</a></td>
</tr>
<tr align="center">
<td><a href="http://www.12306.cn">12306官網</a></td>
<td><a href="http://www.people.com.cn">人民</a><span>•</span><a href="http://www.xinhuanet.com">新華</a></td>
<td><a href="http://www.ganji.com">趕集網</a></td>
<td><a href="http://union.dangdang.com">當當網</a></td>
<td><img src="360小圖示/途牛.jpg" width="15" /><a href="http://www.tuniu.com">途牛旅遊網</a></td>
<td><a href="http://www.baidu.com"><font color="#00CC33"><i><b>1號店</b></i></a> <a href="http://www.baidu.com"><img src="360小圖示/搶福袋.jpg" width="40"/></a></td>
</tr>
<tr align="center">
<td><a href="http://www.zhenai.com">真愛婚戀網</a></td>
<td><a href="http://www.moonbasa.com">夢芭莎</a></td>
<td><a href="http://www.baidu.com">亞馬遜</a></td>
<td><a href="http://www.baidu.com">藝龍網</a></td>
<td><a href="http://www.baidu.com">去哪兒網</a></td>
<td><a href="http://www.baidu.com">美麗說</a></td>
</tr>
<tr align="center" >
<td><a href="http://www.baidu.com">美團網</a></td>
<td><a href="http://www.baidu.com">樂視視訊</a></td>
<td><img src="360小圖示/唯品會.jpg" width="15"/><a href="http://www.baidu.com">唯品會</a></td>
<td><a href="http://www.baidu.com"><font color="#CC6600">聚美優品</a></td>
<td><a href="http://www.baidu.com">搜房網</a></td>
<td><a href="http://www.baidu.com">蘑菇街</a></td>
</tr>
<tr align="center">
<td><a href="http://www.baidu.com">獵聘網</a></td>
<td><a href="http://www.baidu.com">1 藥網</a></td>
<td><a href="http://www.baidu.com">陸金所理財</a></td>
<td><a href="http://www.baidu.com">六間房</a></td>
<td><a href="http://www.baidu.com">攜程機票</a></td>
<td><a href="http://www.baidu.com">12306·搶票</a></td>
</tr>
</table>

</div>
<div id="右下">
<div id="右下1"></div>
<table>
<tr><td align="left">猜你喜歡</td></tr>
</table>
<div id="右下2">
<table height="240px" width="760px" cellpadding="2">
<tr align="center"><td>遊戲</td><td>永久免費遊戲</td><td>全部裝備靠打</td><td>非人民幣玩家</td><td>傳奇公益服</td><td>2015新版傳奇</td><td>傳奇單機版</td></tr>
<tr align="center"><td>財經</td><td>金錢</td><td>信用卡</td><td>軟體</td><td>p2p</td><td>理財</td><td>賺錢</td></tr>
<tr align="center"><td>汽車</td><td>買車</td><td>低價</td><td>品牌</td><td>舒適</td><td>二手車</td><td>違章</td></tr>
<tr align="center"><td>生活</td><td>理財</td><td>信用卡</td><td>低價</td><td>信貸</td><td>物流</td><td>賺錢</td></tr>
<tr align="center"><td>購物</td><td>食品</td><td>酒水</td><td>遞減</td><td>清倉</td><td>蘇寧</td><td>京東</td></tr>
<tr align="center"><td>旅遊</td><td>途牛</td><td>去哪</td><td>攜程</td><td>驢媽媽</td><td>機票</td><td>火車</td></tr>
</table>
</div>

</div>
<div id="懸浮窗">這是一個廣告</div>
</body>
</html>

CSS表

@charset "utf-8";
/* CSS Document */
<style type="text/css">
*
{
margin:0px;
padding:0px;
}
body{
background-image:url(360小圖示/白灰漸變.png)
}
#搜尋欄
{
border:1px solid #999;
height:60px;
width:1000px;
position:absolute;
}
#綜合搜尋
{
width:100;
height:60px;
left:200px;
top:10px;
position:absolute;
}

#文字框/*難點一：修改文字框高和寬*/
{
width:400px;
height:40px;
top:8px;
left:320px;
position:absolute;
}
#按鈕/*難點二：修改按鈕高和寬，也可以直接在style裡面改*/
{
width:100px;
height:40px;
top:10px;
left:730px;
position:absolute;}
.font1/*難點三：修改按鈕裡面的字型——用class引用*/
{
font-family:"宋體";
font-size:15px;}

#左上
{
background-color:#FFF;
border:1px solid #999;
height:300px;
width:230px;
left:10px;
top:80px;
position:absolute;
}
#左中
{
background-color:#FFF;
border:1px solid #999;
height:120px;
width:230px;
left:10px;
top:390px;
position:absolute;
}

#左下
{
background-color:#FFF;
border:1px solid #999;
height:240px;
width:230px;
left:10px;
top:520px;
position:absolute;
}
#左下分1
{
height:30px;
width:230px;
left:0px;
position:absolute;

}
#左下分2
{
height:30px;
width:230px;
left:0px;
top:30px;
position:absolute;

}
#左下圖片
{
height:120px;
width:230px;
top:60px;
left:10px;
position:absolute;
}
#左下分3
{
height:30px;
width:230px;
left:0px;
top:180px;
position:absolute;

}
#左下分4
{
height:30px;
width:230px;
left:0px;
top:210px;
position:absolute;

}
#右上
{
background-color:#FFF;
border:1px solid #999;
height:360px;
width:760px;
left:250px;
top:80px;
position:absolute;
}
#右下
{
background-color:#FFF;
border:1px solid #999;
height:280px;
width:760px;
left:250px;
top:450px;
position:absolute;
}
#右下1
{
height:40px;
width:760px;
left:250px;
top:0px;
position:absolute;}
#右下2
{
height:240px;
width:760px;
left:0px;
top:40px;
position:absolute;}
#懸浮窗
{
border:5px solid #999;
width:150px;
height:80px;
margin:10px;
background-color:#666;
right:30px;
bottom:20px;
position:fixed;
}
a:link
{
color:#000;
text-decoration:none;}/*下劃線*/
a:visited
{
color:#000;
text-decoration:none}
a:hover
{
color:#F00;
text-decoration:underline;}
a:active
{
color:#F60;
text-decoration:underline;}

</style>

總結

Stacks網頁佈局製作外掛
2021-12-02
網頁
CSS層疊樣式表——DIV+CSS佈局
2017-11-12
CSS
CSS3（三）佈局樣式
2016-09-24
CSSS3
登陸頁面樣式佈局
2012-11-18
css網頁的幾種佈局
2019-02-27
CSS網頁
css頁面佈局
2018-11-29
CSS
學習如何用CSS變數建立網頁響應佈局 — css var()
2019-02-16
CSS變數網頁
用 CSS Grid 佈局製作一個響應式柱狀圖
2020-05-26
CSS
CSS3製作圖片樣式
2024-04-01
CSSS3
網頁佈局CSS技巧-Web設計必知
2009-12-24
網頁CSSWeb
CSS網格佈局
2018-06-28
CSS
非佈局樣式-裝飾性屬性&CSS hack
2018-04-08
CSS
CSS 變數讓你輕鬆製作響應式網頁
2018-03-07
CSS變數網頁
網頁佈局方法
2018-12-20
網頁
小米商場佈局練習
2020-10-23
網頁響應式佈局的應用
2020-12-04
網頁
【圖片版】學習CSS網格佈局
2021-09-09
CSS
原生 CSS 網格佈局學習筆記
2016-12-08
CSS筆記
原生CSS網格佈局學習筆記
2016-12-22
CSS筆記
jQuery Mobile仿360首頁，jQuery Mobile網格佈局,jQuery Mobile網址大全,HTML5仿360首頁
2014-07-03
jQueryHTML
讓頁面的字型變得更清晰（css實現）和使用css樣式佈局價格劃線
2018-01-17
CSS
大學生川菜網頁製作教程表格佈局網頁模板學生HTML靜態水煮魚網頁設計作業成品簡單網頁製作程式碼學生美食網頁作品免費設計
2020-11-27
網頁HTML
CSS學習-Flex佈局複習
2019-04-15
CSSFlex
網頁佈局基礎
2018-09-18
網頁
CSS佈局 --- 居中佈局
2018-08-24
CSS
css佈局-float佈局
2018-04-09
CSS
css經典佈局學習
2015-03-06
CSS
少寫css,早下班!Antd完成todo-list樣式佈局
2018-07-12
CSS
[翻譯]CSS變數讓你輕鬆製作響應式網頁
2018-03-04
CSS變數網頁
CSS入門指南-4：頁面佈局
2019-03-03
CSS
20個首頁流行佈局樣式,你喜歡哪個?
2022-12-26
CSS Grid 網格佈局
2017-08-14
CSS
通過生成內容和CSS網格佈局為空單元格新增樣式
2018-06-13
CSS
CSS層疊樣式表——定義樣式表
2017-11-12
CSS
前端網頁佈局全解析
2019-01-06
前端網頁
網頁的瀑布流佈局
2017-11-10
網頁
html5網頁佈局
2017-11-16
HTML網頁
網頁版面的佈局 (轉)
2007-11-07
網頁

CSS樣式表——佈局練習（製作360網頁）

相關文章