HTML+CSS常见网页布局排版-学成在线

已于 2024-08-09 00:16:17 修改
阅读量249 收藏 1
点赞数 4
文章标签： html css 前端
于 2024-08-09 00:10:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64450406/article/details/140067661
版权

 学成在线网站练习

HTML内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学成在线首页</title>
    <link rel="stylesheet" href="./学成在线.css">
</head>

<body>
    <!-- 头部区域开始啦 -->
    <div class="header w">
        <!-- logo部分 -->
        <div class="logo"><img src="./images/logo.png" alt=""></div>
        <!-- 实际开发中导航栏用li+a完成 -->
        <!-- nav导航栏 -->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>
        <!-- 搜索模块 -->
        <div class="search">
            <input type="text" value="输入关键词">
            <button></button>
        </div>
        <!-- 用户模块 -->
        <div class="user">
            <img src="./images/user.png" alt="" style="vertical-align: middle;">
            qq.leizhu
        </div>
    </div>
    <!-- 头部区域结束啦 -->
    <!-- banner区域开始啦 -->
    <div class="banner">
        <!-- 版心部分 -->
        <div class="w">
            <div class="subnav">
                <ul>
                    <li><a href="#"> 前端开发<span>
                                > </span></a></li>
                    <li><a href="#">后端开发<span>
                                > </span></a></li>
                    <li><a href="#">移动开发<span>
                                > </span></a></li>
                    <li><a href="#">人工智能<span>
                                > </span></a></li>
                    <li><a href="#">商业预测<span>
                                > </span></a></li>
                    <li><a href="#">云计算&大数据<span>
                                > </span></a></li>
                    <li><a href="#">运维&测试<span>
                                > </span></a></li>
                    <li><a href="#">UI设计<span>
                                > </span></a></li>
                    <li><a href="#">产品<span>
                                > </span></a></li>
                </ul>

            </div>
            <!-- 课程表模块 -->
            <div class="course">
                <!-- <dl>
                    <dt>我的课程</dt>
                    <dd>继续学习 程序语义设计<span>正在学习-使用对象</span></dd>
                    <dd>继续学习 程序语义设计<span>正在学习-使用对象</span></dd>
                    <dd>继续学习 程序语义设计<span>正在学习-使用对象</span></dd>

                </dl> -->
                <h2>我的课程</h2>
                <div class="bd">
                    <ul>
                        <li>
                            <h4>继续学习 程序语义设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h4>继续学习 程序语义设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h4>继续学习 程序语义设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                        <a href="#" class="more">全部课程</a>
                    </ul>
                </div>

            </div>
        </div>
    </div>
    </div>

    <!-- banner区域结束啦 -->
    <!-- 精品推介模块开始 -->
    <div class="goods w">
        <h3>精品推荐</h3>
        <ul>
            <li><a href="#">JQuery</a></li>
            <li><a href="#">Spark</a></li>
            <li><a href="#">MySQL</a></li>
            <li><a href="#">JavaWeb</a></li>
            <li><a href="#">MySQL</a></li>
            <li><a href="#">JavaWeb</a></li>
        </ul>
        <a href="#" class="mod">修改兴趣</a>
    </div>
    <!-- 精品推介模块结束 -->
    <!-- 核心内容区域开始 -->
    <div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <ul>
                <li>
                    <em><img src="./images/hot.png" alt=""></em>
                    <img src="./images/pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info"><span>高级</span>• 1125人在学习</div>
                </li>
                <li>
                    <em><img src="./images/new.png" alt=""></em>
                    <img src="./images/pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info"><span>高级</span>• 1125人在学习</div>
                </li>
                <li><img src="./images/pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info"><span>高级</span>• 1125人在学习</div>
                </li>
                <li><img src="./images/pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info"><span>高级</span>• 1125人在学习</div>
                </li>
                <li><img src="./images/pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info"><span>高级</span>• 1125人在学习</div>
                </li>
                <li><img src="./images/pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info"><span>高级</span>• 1125人在学习</div>
                </li>
                <li><img src="./images/pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info"><span>高级</span>• 1125人在学习</div>
                </li>
                <li><img src="./images/pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info"><span>高级</span>• 1125人在学习</div>
                </li>
                <li><img src="./images/pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info"><span>高级</span>• 1125人在学习</div>
                </li>
                <li><img src="./images/pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info"><span>高级</span>• 1125人在学习</div>
                </li>

            </ul>
        </div>
    </div>
    <!-- 核心内容区域结束 -->
    <!-- 尾部设计开始 -->
    <div class="footer">
        <div class="w">
            <div class="copyleft">
                <img src="./images/logo.png" alt="">
                <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
                    <br>© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号
                </p>
                <a href="#">下载APP</a>
            </div>
            <div class="links">
                <dl>
                    <dt><a href="#"></a>关于学成网 </a></dt>
                    <dd><a href="#"></a>关于</a> </dd>
                    <dd><a href="#"></a>管理团队</a></dd>
                    <dd><a href="#"></a>工作机会</a></dd>
                    <dd><a href="#"></a>客户服务</a></dd>
                    <dd><a href="#"></a>帮助</a></dd>
                </dl>
                <dl>
                    <dt><a href="#">新手指南</a> </dt>
                    <dd><a href="#">如何注册</a></dd>
                    <dd><a href="#">如何选择</a></dd>
                    <dd><a href="#">学分是什么</a></dd>
                    <dd><a href="#">怎样拿到毕业证</a></dd>
                    <dd><a href="#">考试未通过怎么办</a></dd>
                </dl>
                <dl>
                    <dt>合作伙伴</dt>
                    <dd>合作机构</dd>
                    <dd>合作导师</dd>
                </dl>
            </div>
        </div>
    </div>
    <!-- 尾部设计结束 -->
</body>

</html>

css样式

* {
    margin: 0;
    padding: 0;
}

.w {
    width: 1200px;
    margin: 0 auto;
}

body {
    background-color: #fff;
    height: 3000px;
}

/* 导航栏模块 */
a {
    text-decoration: none;
}

li {
    list-style: none;

}

.nav {
    float: left;
    margin-left: 60px;
}

.nav ul li {
    float: left;
    color: #000;
    margin: 0 15px;
}

.nav ul li a {
    /* 把a转化为块级元素 */
    display: block;
    height: 42px;
    padding: 0 10px;
    line-height: 42px;
    font-size: 18px;
}

.nav ul li a:hover {
    border-bottom: 2px solid #00a4ff;
    color: #00a4ff;
}

/* 导航栏模块结束 */
.header {
    height: 42px;
    background-color: #fdfdfd;
    margin: 30px auto;
}

/* nav中的logo块 */
.logo {
    float: left;
    width: 198px;
    height: 42px;
}

/* search模块开始 */
.search {
    float: left;
    width: 412px;
    height: 42px;
    background-color: skyblue;
    margin-left: 50px;
}

.search input {
    float: left;
    width: 345px;
    height: 40px;
    border: 2px solid #00a4ff;
    border-right: 0;
    font-size: 14px;
    color: #9d9c9c;
    padding-left: 15px;
}

.search button {
    float: left;
    width: 50px;
    height: 42px;
    background-image: url(./images/btn.png);
    /* 按钮默认有个边框 */
    border: 0;
}

.user {
    float: right;
    line-height: 42px;
    margin-right: 30px;
    font-size: 14px;
    color: #666;

}

/* 头部区域结束啦 */
/* 第二区域区域开始啦 */
.banner {
    height: 421px;
    background-color: #1c036c;

}

.banner .w {
    height: 421px;
    background: url(./images/banner2.png);
    margin: 0 auto;

}

/* 侧边栏 */
.subnav {
    float: left;
    width: 190px;
    height: 421px;
    background: rgba(0, 0, 0, 0.3);
}

.subnav ul li {
    height: 45px;
    line-height: 45px;
    padding: 0 20px;
}

.subnav ul li a {
    font-size: 14px;
    color: white;

}

.subnav ul li a span {
    float: right;
}

.course {
    float: right;
    width: 230px;
    height: 310px;
    border-color: #9d9c9c;
    /* 浮动的盒子不会有外边距合并的问题 */
    margin-top: 50px;

}

.course h2 {
    height: 48px;
    background-color: #90d2f5;
    text-align: center;
    line-height: 48px;
    font-size: 18px;
    color: #fff;

}

.bd {
    background-color: #fff;
    padding: 0 20px;
}

.bd ul li {
    padding: 15px 0;
    border-bottom: 1px solid #ccc;
}

.bd ul li h4 {
    font-size: 16px;
    color: #4e4e4e;
}

.bd ul li p {
    font-size: 14px;
    color: #a5a5a5;
}

.bd .more {
    display: block;
    height: 38px;
    width: 100%;
    border: 3px solid #00a4ff;
    text-align: center;
    line-height: 38px;
    color: #00a4ff;
    font-size: 16px;
    font-weight: 700;
    margin-top: 5px;
    margin-bottom: 5px;
}

/* 第二区域区域结束啦 */
/* 精品推介模块 */
.goods {
    height: 60px;
    background-color: #fff;
    margin-top: 10px;
    box-shadow: 0 4px 3px 3px rgba(0, 0, 0, 0.1);
    /* 行高会继承给三个孩子 */
    line-height: 60px;
}

.goods h3 {
    float: left;
    margin-left: 30px;
    font-size: 16px;
    color: #00a4ff;
}

.goods ul {
    float: left;

}

.goods ul li {
    float: left;
    margin-left: 30px;
}

.goods ul li a {
    padding: 0 30px;
    font-style: 16px;
    color: #000;
    border-left: 1px solid #ccc;
}

.goods .mod {
    float: right;
    margin-left: 30px;
    color: #00a4ff;
}

.mod:hover {
    color: rgb(244, 112, 112);
}

/* 精品推介模块结束 */
/* 主体box部分开始 */
.box {
    margin-top: 30px;
    overflow: hidden;
}

.box-hd {
    height: 45px;
}

.box-hd h3 {
    float: left;
    height: 40px;
    font-size: 20px;
    color: #494949;
}

.box-hd a {
    float: right;
    font-size: 12px;
    color: #a5a5a5;
    margin-top: 10px;
    margin-right: 30px;
}

.box-bd ul {
    width: 1225px;
    overflow: hidden;
}

.box-bd ul li {
    position: relative;
    float: left;
    width: 228px;
    height: 270px;
    background-color: #fff;
    margin-right: 15px;
    margin-bottom: 15px;
}

.box-bd ul li em {
    /* 父子相绝定位 */
    position: absolute;
    top: 5px;
    right: -7px;
}

.box-bd ul li>img {
    width: 100%;
}

.box-bd ul li h4 {
    margin: 10px 20px 0 25px;
    font-size: 14px;
    color: #050505;
    font-weight: 600;
}

.box-bd ul li .info {
    margin: 10px 20px 0 25px;
    font-size: 12px;
    color: #999;
}

.box-bd ul li .info span {
    color: #ff7c2d;
}

.footer {
    height: 415px;
    background-color: #f9fcfe;
}

.footer .w {
    padding: 35px;
}

.copyleft {
    float: left;

}

.copyleft p {
    color: #666;
    font-size: 12px;
    margin-top: 20px;
    margin-bottom: 15px;
}

.copyleft a {
    display: block;
    border: 2px solid #00a4ff;
    width: 118px;
    height: 34px;
    font-size: 16px;
    line-height: 34px;
    color: #00a4ff;
    text-align: center;
}

.links {
    float: right;
}

.links dl {
    float: left;
    margin-left: 100px;
}

.links dl dt {
    font-size: 16px;
    color: #333;
    margin-bottom: 5px;
}

.links dl dd {
    color: #333;
    font-size: 12px;
}

垦利不
关注
html在线排版编辑工具,html+css+js开发文本编辑器，有各种排版功能！
weixin_36383052的博客
05-30 1359
当点击上面的按钮，例如添加图片，就会直接向textarea文本框添加一段预设的图片标签。如果添加超链接，就会向文本框添加超链接标签，我们只需要把超链接和链接文字填上去即可。Hello World.a{background: url(images/a.png)no-repeat; border:none;outline:none;width: 50px;height: 35px;}.p{backgr...
html中div页面布局,前端入门篇（二）：利用Div + CSS快速布局页面
weixin_33236595的博客
06-04 2358
在各类智能手机和平板出现前的很长一段时间里，Web网页都是通过表格进行布局的。由于表格在视觉呈现上的直观，早期很多WYSIWYG(所见即所得)的网页设计软件通常也多使用表格。但是这种布局方式有很大的局限性——比如，同一行或列的单元格在长度、宽度上会相互影响和制约等。如今，表格式布局早已不再流行，本文就此介绍将其「拍死在沙滩上」、目前最为广泛采用的网页布局方式——Div + CSS。一、什么是Div...
CSS布局 ——从display，position， float属性谈起
weixin_33950035的博客
10-13 196
页面布局，或者是在页面上做些小效果的时候经常会用到 display,position和float 属性，如果对它们不是很了解的话，很容易出现一些莫名其妙的效果，痛定思痛读了《CSS Mastery》后总结一下。 让我们从基础的CSS知识谈起，相信很多初学者和小弟一样不明白CSS原理，一味追求效果，结果页面漏洞百出，错误匪夷所思，关于盒模型我就不多说了，网上很多，注意一下IE和其他浏览器（W3C规...
HTML+CSS-项目：学成在线
CaptainDrake的博客
11-25 1792
HTML+CSS项目：学成在线
css布局及按钮在线生成
weixin_34240657的博客
09-08 233
css布局学习：http://www.runoob.com/w3cnote/flex-grammar.html 按钮在线生成：http://www.bestcssbuttongenerator.com/#/14 转载于:https://www.cnblogs.com/panlongfeng/p/7495250.html
15个CSS网格布局在线生成器网站
桂林哈秋 - 我想学编程
06-15 2040
文章来自：http://www.bobd.cn/design/web/htmlcss/200906/31976.html55+ Extremely Useful Online Generators for Designers------------------------------------------------------------------------------------
【六】CSS之网页布局
Chimengmeng的博客
07-04 732
【六】CSS之网页布局 【1】什么是网页布局 所谓的布局就是依靠css布局让html元素，可以按照UI设计师提供的设计稿进行HTML网页的内容排版并实现页面的布局效果。 布局的学习关键就是： 布局方式， 盒模型， css样式。 css中提供了4种布局方式： 分别是流式布局(默认方式) 浮动布局 定位布局 弹性布局(伸缩盒)。 【2】布局属性 (1)表格相关 纯粹的表格布...
Html+css+js装饰装修设计-html之web课设
11-15
CSS（Cascading Style Sheets）则负责网页的样式和布局。在装饰装修设计的场景下，CSS可以用来定制色彩方案，设置背景图片以体现设计风格，调整字体和排版，定义元素的位置和尺寸，以及实现响应式设计，使网站在不同...
164个div+css精美网页模板31-40
12-11
在IT行业中，网页设计是至关重要的一个领域，而Div+CSS是构建网页布局的主要技术之一。"164个div+css精美网页模板31-40" 是一个集合，包含了一系列基于Div和CSS编写的高质量网页设计模板，用于帮助设计师和开发者...
全国“创新杯”计算机类说课大赛一等奖作品：《DIV+CSS布局网页》教学设计方案.docx
05-22
### DIV+CSS布局网页教学设计知识点解析 #### 一、教学背景与意义 - **教学背景**：在当前数字化时代背景下，网页设计已经成为一项必备技能。DIV+CSS布局作为网页设计中的关键技术之一，其重要性不言而喻。全国...
精通CSS+DIV网页样式与布局--页面和浏览器元素
gfjjggg的博客
11-11 549
精通CSS+DIV网页样式与布局--页面和浏览器元素
css 简单网页布局——浮动（一）
最新发布
m0_74012211的博客
10-05 571
css 简单网页布局（一）
CSS常见网页布局
weixin_63050915的博客
02-20 1157
这个网页布局主要用到了CSS块级元素浮动和清除浮动，以及类外边距的设置 1.首先将网页分为4个标准流块级元素，分别是：top,banner,box,fotter 即boday部分为： <div class="top">top</div> <div class="banner">banner</div> <div class="box"> <ul> <...
前端之CSS布局一览
weixin_46372074的博客
03-13 863
前端之CSS布局一览CSS布局布局类型正常布局流display属性弹性盒子 Flexbox用法：flex属性Grid布局用法： 终于学到了我最期望的地方了。。。 CSS布局 CSS布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。 布局类型 正常布局流 display属性 弹性盒子 网格 浮动 定位 CSS 表格布局 多列布局 正常布局流 就是浏览器默认的HTML布局方式。 其他布局方式都会覆盖掉默认布局样式。 display属性 设置元素的行为方式。
CSS 常见布局
xiangxiongfly
01-29 1787
单列布局 单列布局（不通栏） 单列布局（通栏） 双列布局 float+overflow:hidden flex grid 三列布局 三列布局（圣杯布局） 三列布局（双飞翼布局） 等高布局 等高布局（正padding+负margin） 仿表格布局 粘连布局
前端css样式在线生成器
单人影的博客
08-14 1240
快速生成css样式代码
html css网页制作成品——个人网页制作 web个人网站模板 简单静态HTML个人网页作品
12-15 3491
📂文章目录二、✍️网站描述三、📚网站介绍四、🌐网站演示五、🔧 网站代码🧱HTML结构代码💒CSS样式代码六、🥇 如何让学习不再盲目七、🎁更多干货 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】 # 一、👨‍🎓网站题目 🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。 二、✍️网站描述 ⭐个人网页设计网站模板采用DIV
css初入门：网页布局之网格布局-grid
lalala_dxf的博客
04-25 5261
网格列（Grid Columns）网格行（Grid Rows）网格间隙（Grid Gaps）通过以下属性来调整网格间隙。// 竖直间隙// 水平间隙// 是 row-gap 和column-gap 属性的简写属性列线与竖线列之间的线称为列线（column lines）。行之间的线称为行线（row lines）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值