初識前端做業1

時間  2019-12-15
標籤 前端 简体版
原文   原文鏈接

效果圖：css

 

代碼以下：html

　　HTML：spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="ty_css.css" rel="stylesheet" type="text/css" />
</head>
<body style="margin:0;  ">
    <div class = "pg_header">
        <div class="he_width">
            <div style="float: left;">收藏本站</div>
            <div style="float: right;">
                <a>登陸&nbsp</a>
                <a>註冊&nbsp</a>
                <a>個人訂單&nbsp</a>
                <a>個人收藏&nbsp</a>
                <a>VIP會員俱樂部&nbsp</a>
                <a>客戶服務&nbsp</a>
                <a>關注&nbsp</a>
                <a>手機版</a>
            </div>
            <div style="clear: both"></div>
        </div>
    </div>
    <div class="pg_header2">
        <div class="he_width">
            <div style="float: left;height: 80px">
                    <img src="image\1.jpg" style="height: 80px;">
            </div>
            <div style="float: right">
                <select name="city" style="height: 34px;width: 200px">
                <option value="1" >購物車2件</option>
            </select>
            </div>
            <div style="text-align: center">
                <input type="text" style="height: 30px;width: 300px">
                <input type="button" value="搜索" style="height: 36px;width: 60px">
                <a>熱門搜索：火龍果、瓜子</a>
            </div>
            <div style="clear: both"></div>
        </div>
    </div>
    <div class="pg_header3">
        <div class="he_width">
            <div style="float: left;background-color: #ff0076;width: 20%">
                <a class="a_head">所有商品分類</a>
            </div>
            <div style="background-color: #ff0076">
                <a class="a_head2" style="background-color: #ff0047">首頁</a>
                <a class="a_head2">網上超市</a>
                <a class="a_head2">水果超市</a>
                <a class="a_head2">超級訂餐</a>
                <a class="a_head2">生活娛樂</a>
                <a class="a_head2">研究院</a>
                <a class="a_head2" style="float: right">論壇</a>
                <a class="a_head2" style="float: right">換膚</a>
            </div>
            <div style="clear: both"></div>
        </div>
    </div>
    <div class="he_width">
        <div style="float: left;width: 20%;">
            <div class="lit_head">
                <p style="font-weight: bold">南方水果</p>
                <a>火龍果</a>
                <a>橘子</a>
                <a>荔枝</a>
            </div>
            <div class="lit_head">
                <p style="font-weight: bold">北方水果</p>
                <a>蘋果</a>
                <a>葡萄</a>
                <a>哈密瓜</a>
            </div>
            <div class="lit_head">
                <p style="font-weight: bold">南方水果</p>
                <a>火龍果</a>
                <a>橘子</a>
                <a>荔枝</a>
            </div>
            <div class="lit_head">
                <p style="font-weight: bold">北方水果</p>
                <a>蘋果</a>
                <a>葡萄</a>
                <a>哈密瓜</a>
            </div><br>
            <div class="lit_head2">
                <a style="font-weight: bold">熱銷排行榜</a>
            </div>
            <div class="lit_head" style="height: 35px">
                <a style="line-height: 35px">content</a>
            </div>
        </div>
        <div style="float: right;width: 79%">
            <h4>交通&gt&gt汽車&gt&gt跑車</h4>
            <div class="lit_right">
                <dl>
                    <dt>
                        <a class="chose_tit">您已選擇：</a>
                        <a>跑車</a>
                    </dt>
                    <dd>
                        <a class="chose_tit">材質：</a>
                        <a>黃金</a>
                        <a>白銀</a>
                        <a>青銅</a>
                    </dd>
                    <dd>
                        <a class="chose_tit">品牌：</a>
                        <a>蘭博基尼</a>
                        <a>法拉利</a>
                        <a>柯尼塞格</a>
                    </dd>
                    <dd>
                        <a class="chose_tit">風格：</a>
                        <a>炫酷</a>
                        <a>低調</a>
                        <a>奢華</a>
                    </dd>
                </dl>
            </div>
            <div style="border:1px solid #C2C2C2;text-align: center">
                <a>更多選項</a>
            </div><br>
            <div class="lit_right2">
                <a class="r2_word">排序：</a>
                <a class="r2_word">價格&darr;</a>
                <a class="r2_word">銷量&darr;</a>
                <a class="r2_word">最新&darr;</a>
                <a class="r2_word3">&gt;</a>
                <a class="r2_word3">&lt;</a>
                <a class="r2_word2" style="width:60px">1&frasl;777</a>
                <a class="r2_word2">共xx件商品</a>
            </div>
            <div style="display: inline-block;text-align: center">
                <div style="float: left;width:25%">
                    <img src="image\2.jpg">
                </div>
                <div style="float: left;width:25%">
                    <img src="image\2.jpg">
                </div>
                <div style="float: left;width:25%">
                    <img src="image\2.jpg">
                </div>
                <div style="float: left;width:25%">
                    <img src="image\2.jpg" >
                </div>
                <div style="float: left;width:25%">
                    <img src="image\2.jpg">
                </div>
                <div style="float: left;width:25%">
                    <img src="image\2.jpg">
                </div>
                <div style="float: left;width:25%">
                    <img src="image\2.jpg">
                </div>
                <div style="float: left;width:25%">
                    <img src="image\2.jpg" >
                </div>
                <div style="float: left;width:25%">
                    <img src="image\2.jpg">
                </div>
                <div style="float: left;width:25%">
                    <img src="image\2.jpg" >
                </div>
            </div>
        </div>
    </div>
</body>
</html>

 　　css：3d

.pg_header{
    height: 40px;background-color: #dddddd;line-height:40px;
}
.pg_header2{
    height: 80px;line-height: 80px;
}
.pg_header3{
    height: 40px;background-color: #ff0047;line-height: 40px;
}
.he_width{
    width: 1200px;  margin: 0 auto;
}
.a_head{
    display: block;text-align: center;color: aliceblue
}
.a_head2{
    display: inline-block;width: 80px;text-align: center;
}
.lit_head{
    border: 1px solid #C2C2C2;
}
.lit_head2{
    height: 35px;border: 1px solid #C2C2C2;background-color: #dddddd;line-height: 35px;
}
.lit_right{
    border: 1px solid #C2C2C2;border-top: 2px solid red;
}
.chose_tit{
    line-height: 40px;font-weight: bold
}
.lit_right2{
    border: 1px solid #C2C2C2;background-color: #E7E7E7;
}
.r2_word{
    display: inline-block;height: 40px;line-height: 40px;width: 70px;text-align: center;
}
.r2_word2{
    display: inline-block;height: 40px;line-height: 40px;color: red;width: 100px;float: right;
}
.r2_word3{
    display: inline-block;height: 40px;line-height: 40px;width: 30px;float: right;
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程