HTML+CSS第十一章总结

最新推荐文章于 2022-06-21 18:06:24 发布
最新推荐文章于 2022-06-21 18:06:24 发布
阅读量1.1k 收藏 10
点赞数 5
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sc13647346287/article/details/87191010
本文总结了使用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
最低0.47元/天 解锁文章

200万优质内容无限畅学
一江风雪
关注
作业一学期三书十一章
sc13647346287的博客
11-28 388
注册页： &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;注册&amp;lt;/title&a
第一章 面试题基础篇（HTML+CSS）
最新发布
欢迎来到我的博客！
08-09 2113
CSS的盒子模型有哪些：标准盒子模型、IE盒子模型CSS的盒子模型区别：标准盒子模型：margin、border、padding、contentIE盒子模型 ：margin、content（ border + padding + content ）通过CSS如何转换盒子模型：/*标准盒子模型*//*IE盒子模型*/reset.css 是一个css文件，用来重置css样式的。normalize.css 为了增强跨浏览器渲染的一致性，一个CSS 重置样式库。
HTML第11章 课堂练习 PPT及答案 CSS.ACCP6.0
05-10
HTML第11章 课堂练习 PPT及答案 CSS.ACCP6.0
HTML 第十一章总结
weixin_30653097的博客
12-07 213
# 第十一章总结:本章的标题为：layout and positioning Arranging Element##前言：这一章节，通过已经知道的 box model 的概念，进行讲述关于 layout 的知识，并且通过这些知识进行创造专业的设计和 multicolumn layouts. ##谈谈Flow###对于block element* 对 block element 来说， Brow...
第11章：获取html内容
漠血依人
08-01 267
#gain the text of &lt;Romeo and juliet&gt; import requests #罗密欧和朱丽叶的下载地址 res = requests.get('http://www.gutenberg.org/files/1112//1112.txt') try: res.raise_for_status()#如果下载网页资源成功则，什么也不做，失败则抛出异常...
HTMl十一章项目一,《第十一章HTML语言和脚本语言4+2.doc
weixin_39681724的博客
06-19 182
《第十一章HTML语言和脚本语言42HTML语言和脚本语言11.1 HTML语言11.1.1什么是HTMLHTML是用来制作网页的标记语言.HTML是Hypertext Markup Language的英文缩写,即超文本标记语言.HTML语言是一种标记语言,不需要编译,直接由浏览器执行.HTML文件是一个文本文件,包含了一些HTML元素,标签等.HTML文件必须使用html或htm为文件名后缀....
HTml +CSS3知识点总结：
gz98411的博客
06-17 488
一，html+css基础1-1Html和CSS的关系学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的：1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改...
HTML总结&CSS学习总结
m0_65791148的博客
06-21 1818
HTML总结&CSS学习总结
HTML5+CSS3开发商业站点Chapter3.pptx
04-20
### HTML5与CSS3开发商业站点之表单详解 #### 表单概述 表单是网页设计中的一个重要组成部分，主要用于收集用户输入的信息。通过合理的表单设计，网站能够有效地获取用户的反馈、意见或其他数据，从而更好地服务于...
HTML(第十一章案例分析)
qq_24249259的专栏
05-28 629
一 效果图 二代码
1号店html代码
07-01
制作网购网页的HTML部分代码，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习。
一号店页面CSS样式
02-10
网页制作css样式，运用h5技术实现网页动态美化，运用开发工具为abobe dreamweaver cs6,
1号店首页制作html css
03-30
1号店首页制作项目用于学习使用HTML+CSSt进行的网页搭建制作，网页中所用的代码和素材都包含在压缩包中。资源涉及基本HTML标签的使用和CSS样式的设置，适合web前端入门练习，欢迎大家下载参考。
一号店网站HTML案例
05-11
一号店的网页制作，适合刚学习完了HTML+CSS3 的人去模仿练习。代码齐全，CSS文档、图片都有，需要的自取。
1号店首页代码html
03-30
1号店首页代码学习使用...
HTML(第十一章)(两处代码存在着不同的浅微的差距)
qq_59861678的博客
05-12 232
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
HTML第11章：CSS盒模型
qq_42745340的博客
12-09 414
11.1元素分类 在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。 常用的块状元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote&gt...
HTML第十一章项目,第十一章：SpringBoot_Web开发——（静态资源映射规则)
weixin_28699983的博客
07-02 208
总目录：SpringBoot学习教程1.在IDEA中创建一个项目，添加web依赖包。2.我们现在是一个web应用，应该在man目录下面有一个webapp文件夹，将所有的页面都放在这里，这是我们以前的做法。3.但是我们创建的这个项目中，没有这个webapp目录，但是SpringBoot给我们做了规定。4.在SpringBoot中对SpringMVC的相关配置都在 WebMvcAutoConfigur...
《HTML5与CSS3基础教程》第十一章学习笔记 用CSS进行布局
Cap220590的博客
03-01 445
文章目录第11章 用CSS进行布局11.1 开始布局的注意事项11.2 构建页面11.4 对默认样式进行重置或标准化11.5 盒模型11.6 控制元素的显示类型和可见性11.7 设置元素的高度11.8 在元素周围添加内边距11.9 设置边框11.11 使元素浮动11.12 控制元素浮动的位置11.12 控制元素浮动的位置11.13 对元素进行相对定位11.14 对元素进行绝对定位11.15 在栈中...
HTML+CSS：利用class实现页面布局转换
这个过程利用了第十二章介绍的绝对定位技术，使得布局调整既直观又高效。 在标记结构方面，内文页的简化示例如下： ```html <header>... <main>...content... ; right:0;">...right column info... <footer>......
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值