网页布局框架

Posted 筱白迩

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了网页布局框架相关的知识,希望对你有一定的参考价值。

html+css

<!DOCTYPE html>
<html>
<head>
    <title>筱白迩</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            font-family: 微软雅黑;
            list-style: none;
        }
        body{
            background-image: url(1.jpg);
        }
        /*导航栏部分开始*/
        .nav{
            width: 1366px;
            height: 35px;
            background-color: black;
            position: relative;
        }
        
        .nav li{
            width: 60px;
            /*border: 1px solid #fff;*/
            color: #fff;
            /*padding-left: 20px;*/
            line-height: 35px;
            float: left;
            margin-left: 100px;
            text-align: center;
        }
        .nav li:hover{
            background-color: #1e53eb;
            cursor: pointer;
        }
        /*导航栏部分结束*/
        /*banner部分开始*/
        .banner{
            width: 820px;
            height: 375px;
            background-image: url(2.jpg);
            margin-left: 100px;
            margin-top: 10px;
            box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.8);
        }
        .banner p{
            padding: 290px 180px;
            font-size: 30px;
            font-weight: normal;
            color: #000;
            transition: 1s;
        }
        .banner p:hover{
            transform: scale(1.5);
            color: #fff;
        }

        /*banner部分结束*/
        /*右边栏部分开始*/
        .right{
            width: 250px;
            height: 450px;
            border: 1px solid #000;
            position: absolute;
            left: 960px;
            top: 45px;
            box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.6);
        }
        .right ul li{
            height: 44px;
            border-bottom: 1px solid #ccc;
            line-height: 44px;
        }
        .right ul li:hover{
            color: #fff;
            background-color: #1e53eb;
            cursor: pointer;
        }
        .right ul li p{
            font-size: 12px;
        }
        .right  .choice{
            background-color: #1e53eb;
            color: #fff;
        }
        /*右边栏部分结束*/
        /*主体部分开始*/
        .body{
            width: 820px;
            height: 500px;
            /*border: 1px solid yellow;*/
            margin-left: 100px;
            margin-top: 30px;
            
        }
        .body ul li{
            width: 265px;
            height: 220px;
            /*background-color: blue;*/
            float: left;
            margin-left: 8px;
            margin-top: 3px;
        }
        .body ul li p{
            font-weight:normal;
            font-size: 12px;
            margin-top: 10px;
            width: 270px;
            
        }
        .body .rect{
            width: 95px;
            height: 20px;
            border: 1px solid #c3c5cc;
            border-radius: 3px;
            margin-top: 5px;
            
        }
        .body .rect p{
            font-weight: normal;
            font-size: 3px;
            margin-top: 3px;
        }
        /*主体部分结束*/
        footer p{
            position: absolute;
            bottom: -280px;
            left: 100px;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <!-- 导航栏部分开始 -->
    <div class="nav">
        <ul>
            <li>魏国</li>
            <li>蜀国</li>
            <li>吴国</li>
            <li>晋国</li>
        </ul>
    </div>
    <!-- 导航栏部分结束 -->
    <!-- banner部分开始 -->
    <div class="banner">
        <p>若非先主垂三顾&nbsp &nbsp谁识茅庐一卧龙</p>
        
    </div>
    <!-- banner部分结束 -->
    <!-- 右边栏部分开始 -->
    <div class="right">
        <ul>
            <li class="choice"><p>英魂护佑国邦 &nbsp不愧孙武儿郎(孙坚)</p></li>
            <li><p>儿女情深缘浅 &nbsp 慈母空悲伤(吴国太)</p></li>
            <li><p>国色刹那芬芳&nbsp 琉璃苦彷徨(大乔)</p></li>
            <li><p>泪湿红颜损天香&nbsp 生瑜何生亮(小乔)</p></li>
            <li><p>我恩怨随风飘逝&nbsp 兄弟意难忘(凌统)</p></li>
            <li><p>设疑城破军好似铁壁铜墙(徐盛)</p></li>
            <li><p>你决断内务纷纭&nbsp  竭忠智辅君王(张昭&张紘)</p></li>
            <li><p>心长恨水长东悲声吟唱&nbsp  人间天上(孙尚香)</p></li>
            <li><p>神亭岭枪戟显锋芒&nbsp   天义永昭彰(太史慈)</p></li>
            <li><p>锦帆鼓荡铜铃响叮当&nbsp  百骑驰疆场 (甘宁)
</p></li>
        </ul>
    </div>
    <!-- 右边栏部分结束 -->
    <!-- 主体部分开始 -->
    <div class="body">
        <ul>
            <li>
                <h4>Heading<h4>
                <p>你说春光正好,韶华正茂,只羡鸳鸯不羡仙,后来春去难留,庭院深锁,咫尺天涯画堂前。 

你说玉笛飞声,如慕如诉,费尽思量诉衷肠,后来宝鼎茶闲,茶烟尚绿,斯人踪迹已渺茫 

你说有美一人,婉如清扬,邂逅相遇同结好,后来十里长亭,望眼欲穿,杨柳岸月残风晓 

你说霞染天光,春色将老,陌上花开缓缓归,后来台城柳暗,烟笼长堤,惊鸿照影不复回 
</p>
                <div class="rect"><p>View deatails>></p></div>
            </li>
            
            <li>
                <h4>Heading<h4>
                <p>你说霞染天光,春色将老,陌上花开缓缓归,后来台城柳暗,烟笼长堤,惊鸿照影不复回 

你说彼岸人家,华灯初上,温馨祥和心所向,后来渔舟独回,歌尽沧桑,一蓑烟雨自彷徨 

你说岁月静好,并莲同心,天朗气清风和畅,后来轻云蔽月,白露为霜,伊人不知在何方 

你说茜纱窗下,棋罢茶闲,意绵静日玉生香,后来风雨飘零,孤松独支,山冈无处话凄凉</p>
                <div class="rect"><p>View deatails>></p></div>
            </li>
            
            <li>
                <h4>Heading<h4>
                <p>我还是很喜欢你,就像白马银枪,单骑救主,愿你枪出如龙,诸事无违本心。 
我还是很喜欢你,就像座下赤兔,青龙偃月,愿你刀出无悔,傲视八荒六合。 
我还是很喜欢你,就像丈八蛇矛,喝断当阳,愿你心有猛虎,笑看烽火狼烟。 
我还是很喜欢你,就像雌雄双股,三顾茅庐,愿你一世仁德,来日桃园再会。 
我还是很喜欢你,就像赤壁东风,八卦之阵,愿你算无遗策,谋得太平人间。 
</p>
                <div class="rect"><p>View deatails>></p></div>
            </li>
            
            <li>
                <h4>Heading<h4>
                <p>盖聂:若今生长剑浣花,生死无涯。便许你来世雪底封刀,结庐为家。 你可愿荆钗绾发,为我煮茶,明朝江湖饮马。 
端木蓉:若今生顽疾难化,逃不脱命匣。来世,你可愿将韶华折煞, 许我一卦,卦里我命无双,一世容华。 
卫庄:若今生执罔虚幻,已成落花。便许你来世雪扫眉发,执手天涯。 你可愿青丝绾正,笑靥如花,借我一世年华。 
 </p>
                <div class="rect"><p>View deatails>></p></div>
            </li>
            
            <li>
                <h4>Heading<h4>
                <p>赤炼:若今生轻放年华,化身流沙,只为追寻你浪迹的天涯。 来世,你可愿为我折枝白梅花,看一场雪落下。 
高渐离:若今生逆旅天涯,四海为家。便许你来世雪舞霓裳,步步莲华。 你可愿化身为枷,度我年华,细数山室茶花。 
雪女:若今生碎如烟花,不为他嫁。 来世,你可愿等飞雪染白头发,娶我回家。许我一世年华。</p>
                <div class="rect"><p>View deatails>></p></div>
            </li>
            
            <li>
                <h4>Heading<h4>
                <p>你两个都想救,结果却是两个都没有救成,选择生,必有死,选择胜,必有败,这个世界上,胜者生而败者亡,在事实面前,生与死,不过是必然的因果,当今世上7国纷争,生灵涂炭,无论你如何去选择,都难免会有牺牲,纵横者,天地之道,莫说是两条人命,就算是天下苍生放在眼前,又有什么分别呢,这个考验,并不重生死,而在于决断。
</p>
                <div class="rect"><p>View deatails>></p></div>
            </li>
            
        </ul>
        
    </div>
    <!-- 主体部分结束 -->
    <!-- 尾部开始 -->
    <footer>
        <p>&copycopy@软件三班筱白迩</p>
    </footer>
    <!-- 尾部结束 -->
</body>
</html>

 

以上是关于网页布局框架的主要内容,如果未能解决你的问题,请参考以下文章

HTML代码片段

如何利用EasyUI框架控制页面布局

WEB网页设计常见布局

没有带有拉动刷新的互联网消息 webview 片段

流式布局案例——京东网页

常见的几种WEB网页布局结构(PC端)