HTML+CSS第十一章总结

最新推荐文章于 2022-06-21 18:06:24 发布

原创

最新推荐文章于 2022-06-21 18:06:24 发布 · 1.1k 阅读

10 ·

CC 4.0 BY-SA版权

本文总结了使用HTML和CSS进行一号店项目实战的经验，包括注册页、登陆页、首页及珠宝详情页的设计与实现，展示了前端开发中的布局和样式技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一号店项目

注册页：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="registerpage.css">
</head>
<body>
<div class="one">
    <div><a href="#"><img src="loginlogo.jpg"></a></div>
    <div>
        <ul>
            <li>您好，欢迎光临1号店！<a href="#">请登录</a></li>
            <li><img src="无语.png"></li>
        </ul>
    </div>
</div>
<div class="two">
    <ul>
        <li>1号店注册</li>
        <li>
            <form action="#" method="post">
            <p>
                <input type="text" name="" placeholder="    手机号" required/>
            </p>
            <p>
                <input type="text" name=""  placeholder="    手机号" required/>
                <input type="button" value="获取验证码">
            </p>
            <p>
                <input type="password" name=""  placeholder="    密码" required/>
            </p>
            <p>
                <input type="password" name="" placeholder="    确认密码" required/>
            </p>
            <p>
                点击注册，表示您同意1号店
                <a href="#">《服务协议》</a>
            </p>
            <p>
                <input type="submit" value="同意协议并注册">
            </p>
            </form>
        </li>
        <li>
            <p><a href="#">沪ICP备13044278号</a></p>
            <p>合字B1.B2-20130004</p>
            <p><a href="#">营业执照</a></p>
        </li>
        <li>Copyright © 1号店网上超市 2007-2016，All Rights Reserved</li>
    </ul>
</div>
</body>
</html>

body,div,a,img,ul,li,p,input,button{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
a:hover{
    text-decoration: none;
}
.one{
    width: 100%;
    height: 100px;
    border-bottom: 1px solid #e1e1e1;
    position: relative;
    box-shadow: 0px 0px 10px #ccc;
}
.one div:nth-of-type(1){
    margin-left: 200px;
}
.one div:nth-of-type(2){
    position: absolute;
    right: 300px;
    top: 10px;
    height: 30px;
    line-height: 30px;
}
.one div:nth-of-type(2) li{
    float: left;
    margin-right: 30px;
    font-size: 14px;
    color: #999;
}
.one div:nth-of-type(2) li a{
    color: blue;
}
.one div:nth-of-type(2) li a:hover{
    color: orange;
}
.two{
    margin: auto;
    width: 500px;
    height: 500px;
    text-align: center;
}
.two li{
    margin-bottom: 10px;
}
.two li:nth-of-type(1){
    color: black;
    font-size: 24px;
    font-weight: bold;
    margin-top: 30px;
    margin-bottom: 15px;
}
.two li:nth-of-type(2) p{
    margin-bottom: 10px;
}
.two li:nth-of-type(2) p:nth-of-type(1) input{
    width: 300px;
    height: 50px;
    border: 1px #999 solid;
}
.two li:nth-of-type(2) p:nth-of-type(2) input:nth-of-type(1){
    width: 180px;
    height: 50px;
    border: 1px #999 solid;
}
.two li:nth-of-type(2) p:nth-of-type(2) input:nth-of-type(2){
    width: 117px;
    height: 52px;
    background: #57565f;
    color: white;
    border: none;
}
.two li:nth-of-type(2) p:nth-of-type(3) input{
    width: 300px;
    height: 50px;
    border: 1px #999 solid;
}
.two li:nth-of-type(2) p:nth-of-type(4) input{
    width: 300px;
    height: 50px;
    border: 1px #999 solid;
}
.two li:nth-of-type(2) p:nth-of-type(5){
    color: #999;
    font-size: 14px;
}
.two li:nth-of-type(2) p:nth-of-type(6) input{
    width: 300px;
    height: 50px;
    border: none;
    color: white;
    background: red;
    font-size: 18px;
}
.two li:nth-of-type(3){
    width: 100%;
    height: 30px;
    margin-left: 105px;
    margin-bottom: 0;
}
.two li:nth-of-type(3) p{
    float: left;
    border-right: 1px #999 solid;
    font-size: 12px;
    padding-right: 5px;
    padding-left: 5px;
    color: black;
}
.two li:nth-of-type(3) p:last-of-type{
    border: none;
}
.two li:nth-of-type(3) p a{
    color: black;
}
.two li:nth-of-type(3) p a:hover{
    color: red;
}
.two li:nth-of-type(4){
    font-size: 12px;
    color: black;
}

登陆页：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆</title>
    <link rel="stylesheet" type="text/css" href="loginpage.css">
</head>
<body>
<div class="one">
    <div><a href="#"><img src="loginlogo.jpg"></a></div>
    <div>
        <ul>
            <li>您好，欢迎光临1号店！<a href="#">请登录</a></li>
            <li><img src="无语.png"></li>
        </ul>
    </div>
</div>
<div class="two">
    <div class="three">
        <img src="loadimg.jpg">
    </div>
    <div class="four">
        <ul>
            <li class="six">1号店用户登录<a href="#">注册账号</a></li>
            <li>
                <form action="#" method="post">
                    <p>
                        <input type="text" placeholder="邮箱/手机/用户名" required/>
                    </p>
                    <p>
                        <input type="password" placeholder="密码" required/>
                    </p>
                    <p>
                        <input type="checkbox">    自动登陆<a href="#">忘记密码？</a>
                    </p>
                    <p>
                        <input type="submit" value="登陆">
                    </p>
                </form>
            </li>
            <li>更多合作网站账号登陆</li>
            <li>
                <ul>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                    <li>更多合作网站</li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="five">
        <ul>
            <li>
                <p><a href="#">沪ICP备13044278号</a></p>
                <p>合字B1.B2-20130004</p>
                <p><a href="#">营业执照</a></p>
            </li>
            <li>Copyright © 1号店网上超市 2007-2016，All Rights Reserved</li>
        </ul>
    </div>
</div>
</body>
</html>

body,div,a,img,ul,li,p,input,button{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
a:hover{
    text-decoration: none;
}
.one{
    width: 100%;
    height: 100px;
    border-bottom: 1px solid #e1e1e1;
    position: relative;
    box-shadow: 0px 0px 10px #ccc;
}
.one div:nth-of-type(1){
    margin-left: 200px;
}
.one div:nth-of-type(2){
    position: absolute;
    right: 300px;
    top: 10px;
    height: 30px;
    line-height: 30px;
}
.one div:nth-of-type(2) li{
    float: left;
    margin-right: 30px;
    font-size: 14px;
    color: #999;
}
.one div:nth-of-type(2) li a{
    color: blue;
}
.one div:nth-of-type(2) li a:hover{
    color: orange;
}
.two{
    margin: auto;
    height: 480px;
    width: 1050px;
    position: relative;
}
.three{
    position: absolute;
    top: 0;
    left: 0;
    width: 510px;
    height: 315px;
    border: none;
}
.four{
    position: absolute;
    right: 0;
    top: 80px;
    width: 400px;
}
.six{
    color: #666;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
}
.six a{
    color: blue;
    font-size: 12px;
    position: absolute;
    right: 100px;
}
.six a:hover{
    color: red;
}
.four form p{
    margin-bottom: 10px;
}
.four ul li:nth-of-type(2) form p:nth-of-type(1){
    width: 300px;
    height: 50px;
    line-height: 50px;
    position: relative;
    border: 1px #999 solid;
    background: url("../Semester1book3DJ11/userHead.png") 10px no-repeat;
}
.four ul li:nth-of-type(2) form p:nth-of-type(1) input{
    width: 250px;
    height: 50px;
    border: none;
    line-height: 50px;
    position: absolute;
    right: 0;
    font-size: 14px;
}
.four ul li:nth-of-type(2) form p:nth-of-type(2){
    width: 300px;
    height: 50px;
    line-height: 50px;
    position: relative;
    border: 1px #999 solid;
    background: url("../Semester1book3DJ11/lock.png") 10px no-repeat;
}
.four ul li:nth-of-type(2) form p:nth-of-type(2) input{
    width: 250px;
    height: 50px;
    border: none;
    line-height: 50px;
    position: absolute;
    right: 0;
    font-size: 14px;
}
.four ul li:nth-of-type(2) form p:nth-of-type(3){
    font-size: 14px;
    color: #999;
    height: 30px;
    line-height: 30px;
}
.four ul li:nth-of-type(2) form p:nth-of-type(3) a{
    color: #999;
    position: absolute;
    right: 100px;
}
.four ul li:nth-of-type(2) form p:nth-of-type(4) input{
    width: 300px;
    height: 50px;
    font-size: 16px;
    font-weight: bold;
    background: red;
    color: white;
    border: none;
}
.four ul li:nth-of-type(3){
    color: #999;
    font-size: 14px;
}
.four ul li:nth-of-type(4) ul{
    margin-top: 15px;
}
.four ul li:nth-of-type(4) ul li{
    float: left;
}
.four ul li:nth-of-type(4) ul li a{
    display: inline-block;
    margin-right: 15px;
    height: 35px;
    width: 35px;
}
.four ul li:nth-of-type(4) ul li:nth-of-type(1) a{
    background: url("../Semester1book3DJ11/qqf.png") no-repeat;
    background-size: 100% 100%;
}
.four ul li:nth-of-type(4) ul li:nth-of-type(1) a:hover{
    background: url("../Semester1book3DJ11/qqt.png") no-repeat;
    background-size: 100% 100%;
}

.four ul li:nth-of-type(4) ul li:nth-of-type(2) a{
    background: url("../Semester1book3DJ11/wbf.png") no-repeat;
    background-size: 100% 100%;
}
.four ul li:nth-of-type(4) ul li:nth-of-type(2) a:hover{
    background: url("../Semester1book3DJ11/wbt.png") no-repeat;
    background-size: 100% 100%;
}
.four ul li:nth-of-type(4) ul li:nth-of-type(3) a{
    background: url("../Semester1book3DJ11/zhif.png") no-repeat;
    background-size: 100% 100%;
}
.four ul li:nth-of-type(4) ul li:nth-of-type(3) a:hover{
    background: url("../Semester1book3DJ11/zhit.png") no-repeat;
    background-size: 100% 100%;
}
.four ul li:nth-of-type(4) ul li:nth-of-type(4) a{
    background: url("../Semester1book3DJ11/wxf.png") no-repeat;
    background-size: 100% 100%;
}
.four ul li:nth-of-type(4) ul li:nth-of-type(4) a:hover{
    background: url("../Semester1book3DJ11/wxt.png") no-repeat;
    background-size: 100% 100%;
}
.four ul li:nth-of-type(4) ul li:nth-of-type(5){
    height: 35px;
    width: 120px;
    line-height: 35px;
    font-size: 14px;
    color: #999;
    background: url("../Semester1book3DJ11/loadMore.png") right no-repeat;
}
.five{
    position: absolute;
    bottom: 0;
}
.five ul li:nth-of-type(1){
    width: 100%;
    height: 30px;
    margin-left: 335px;
    margin-bottom: 0;
}
.five ul li:nth-of-type(1) p{
    float: left;
    border-right: 1px #999 solid;
    font-size: 12px;
    padding-right: 5px;
    padding-left: 5px;
    color: black;
}
.five ul li:nth-of-type(1) p:last-of-type{
    border: none;
}
.five ul li:nth-of-type(1) p a{
    color: black;
}
.five ul li:nth-of-type(1) p a:hover{
    color: red;
}
.five ul li:nth-of-type(2){
    font-size: 12px;
    color: black;
    margin-left: 325px;
}

首页：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="onewhole">
    <p>送货至：四川</p>
    <ul>
        <li>你好!请<a href="#">登录</a> <a href="#">免费注册</a></li>
        <li><a href="#">我的订单</a></li>
        <li class="two">
            <ul>
                <li><a href="#">收藏夹 <img src="t_arrow.gif"></a></li>
                <li>
                    <a href="#">客服服务 <img src="t_arrow.gif"></a>
                    <div id="one">
                        <div><a href="#">客服服务</a></div>
                        <div><a href="#">客服服务</a></div>
                        <div><a href="#">客服服务</a></div>
                    </div>
                </li>
                <li><a href="#">网站导航 <img src="t_arrow.gif"></a></li>
            </ul>
        </li>
        <li>
            关注我们：
            <a href="#">  <img src="sh1.png"></a>
            <a href="#">  <img src="sh2.png"></a>
        </li>
        <li><a href="#">手机版<img src="s_tel.png"></a></li>
    </ul>
</div>
<div class="twowhole">
    <ul>
        <li><img src="logo.png"></li>
        <li>
            <input type="search" placeholder="  请输入关键字">
            <input type="submit" value="搜索">
        </li>
        <li class="one"><a href="#">购物车</a></li>
        <li>
            <ul>
                <li><a href="#">咖啡</a></li>
                <li><a href="#">inphone 6S</a></li>
                <li><a href="#">新鲜美食</a></li>
                <li><a href="#">蛋糕</a></li>
                <li><a href="#">日用品</a></li>
                <li><a href="#">连衣裙</a></li>
            </ul>
        </li>
    </ul>
</div>
<div class="whole">
    <div class="threewhole">
        <p>全部商品分类</p>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">自营超市</a></li>
            <li><a href="#">1号团</a></li>
            <li><a href="#">1号超市</a></li>
            <li><a href="#">女装</a></li>
            <li><a href="#">美妆</a></li>
            <li><a href="#">1号海购</a></li>
            <li><a href="#">团购</a></li>
        </ul>
        <p><a href="#"><img src="phone.png"></a></p>
    </div>
    <div class="fourwhole">
        <ul>
            <li><img src="nav1.png">&nbsp;&nbsp;&nbsp;进口食品、生鲜</li>
            <li><img src="nav2.png">&nbsp;&nbsp;&nbsp;食品、饮料、酒</li>
            <li><img src="nav3.png">&nbsp;&nbsp;&nbsp;母婴、玩具、童装</li>
            <li><img src="nav5.png">&nbsp;&nbsp;&nbsp;家居、家庭清洁、纸品</li>
            <li><img src="nav6.png">&nbsp;&nbsp;&nbsp;美妆、个人护理、洗护</li>
            <li><img src="nav7.png">&nbsp;&nbsp;&nbsp;女装、内衣、中老年</li>
            <li><img src="nav8.png">&nbsp;&nbsp;&nbsp;鞋靴、箱包、腕表配饰</li>
            <li><img src="nav4.png">&nbsp;&nbsp;&nbsp;男装、运动</li>
            <li><img src="nav9.png">&nbsp;&nbsp;&nbsp;手机、小家电、电脑</li>
            <li><img src="nav10.png">&nbsp;&nbsp;&nbsp;礼品、充值</li>
        </ul>
    </div>
    <div class="three">
        <img src="ban1.jpg">
        <ul>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
        </ul>
    </div>
    <div class="four">
        <div>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;快讯</p>
            <p><a href="#">更多></a></p>
        </div>
        <div>
            <li>【特惠】<a href="#">掬一轮明月 表无尽惦念</a></li>
            <li>【公告】<a href="#">好奇金装成长裤新品上市</a></li>
            <li>【特惠】<a href="#">大牌闪购 · 抢！</a></li>
            <li>【公告】<a href="#">发福利 买车就抢千元油卡</a></li>
            <li>【公告】<a href="#">家电低至五折</a></li>
        </div>
        <div>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;1号钱包</p>
        </div>
        <div>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;收益日结，收益赚High！</p>
            <img src="oneAD.jpg">
        </div>
    </div>
    <div class="five">
        <ul>
            <li>
                <img src="l_img.jpg">
                <p>￥53.00</p>
                <p>16R</p>
            </li>
            <li>
                <p><img src="hot.png"></p>
                <p><a href="#"><img src="hot1.jpg"></a></p>
                <p><a href="#"><span>德国进口</span><br/>德亚全脂纯牛奶200ml*48盒</a></p>
                <p>￥189</p>
                <p>26R</p>
            </li>
            <li>
                <p><img src="hot.png"></p>
                <p><a href="#"><img src="hot2.jpg"></a></p>
                <p><a href="#"><span>iphone 6S</span><br/>Apple/苹果 iPhone 6s Plus公开版</a></p>
                <p>￥5288</p>
                <p>25R</p>
            </li>
            <li>
                <p><img src="hot.png"></p>
                <p><a href="#"><img src="hot3.jpg"></a></p>
                <p><a href="#"><span>倩碧特惠组合套装</span><br/>倩碧补水组合套装8折促销</a></p>
                <p>￥368</p>
                <p>18R</p>
            </li>
            <li>
                <p><img src="hot.png"></p>
                <p><a href="#"><img