前端学习-布局练习

最新推荐文章于 2024-02-09 16:46:41 发布
最新推荐文章于 2024-02-09 16:46:41 发布
阅读量541 收藏
点赞数
分类专栏： 前端学习 文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u013255127/article/details/101936059
版权

效果图:

在这里插入图片描述
在这里插入图片描述

<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-10-02 10:16:08
 * @LastEditTime: 2019-10-02 19:54:30
 * @LastEditors: Please set LastEditors
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>imooc</title>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        /* header */

        .header {
            height: 60px;
            box-shadow: 0 1px 2px whitesmoke;
            min-width: 1200px;
        }

        .header img {
            float: left;
        }

        .header li {
            height: 60px;
            line-height: 60px;
            color: #4D555D;
        }

        .header_menu {
            float: left;
        }

        .header_menu li {
            float: left;
            margin-left: 20px;
        }

        .header_menu li:nth-child(1) {
            margin-left: 0;
        }

        li:hover {
            color: black;
            cursor: pointer;
        }

        .header_menu_right {
            float: right;
        }

        .header_menu_right li {
            float: left;
            margin-right: 20px;
        }

        /* banner_div */
        .banner_div {
            padding: 20px;
            box-shadow: 0 1px 2px whitesmoke;
            background: #f6f5f9;
        }

        .banner {
            margin: 0 auto;
            width: 1150px;
            border-radius: 8px;
            box-shadow: 0 1px 2px #2B333B;
        }

        .banner ul {
            float: left;
            background: #2B333B;
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
            width: 200px;
            padding: 10px 0 10px 10px;
        }

        .banner li {
            height: 50px;
            line-height: 50px;
            font-size: 14px;
            color: #93979C;
            padding-left: 20px;
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
        }

        .banner li:hover {
            color: white;
            background: #6b7176;
        }

        .banner img {
            width: 940px;
            height: 370px;
            display: block;
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
        }

        .dj {
            margin: 20px auto;
            width: 1150px;
        }

        .dj span:nth-child(1) {
            font-size: 24px;
            font-weight: bold;
        }

        .dj span:nth-child(2) {
            font-size: 14px;
            color: #6b7176;
        }

        .dj_ul {
            margin: 20px auto;
            width: 1150px;
            overflow: hidden;
        }

        .dj_ul li {
            float: left;
            background: #f3f5f6;
            padding: 15px 10px;
            width: 190px;
            border-radius: 5px;
            margin-right: 20px;
        }

        .dj_ul:nth-child(5) {
            clear: both;
        }

        .dj_ul li:hover {
            box-shadow: 2px 2px 2px 2px #93979C;

        }

        .dj_ul li img {
            width: 40px;
            height: 40px;
            float: left;
            margin-right: 10px;
        }

        .dj_ul li p:nth-child(2) {
            font-weight: bold;
            font-size: 16px;
        }

        .dj_ul li p:nth-child(3) {
            font-size: 12px;
        }

        .kc {
            padding: 20px;
            box-shadow: 0 1px 2px whitesmoke;
            background: #f8fafc;
        }

        .kc .dj:nth-child(1) {
            font-size: 24px;
            font-weight: bold;
        }

        .kc ul {
            margin: 20px auto;
            width: 1150px;
            overflow: hidden;
        }

        .kc ul li {
            float: left;
            margin-top: 20px;
            margin-right: 30px;
        }

        .kc ul li div img {
            width: 250px;
            border-radius: 5px;
        }

        .kc ul li div span {
            position: absolute;
            margin-left: -240px;
            margin-top: 110px;
            background: #2B333B;
            color: white;
            font-size: 10px;
            padding: 3px 5px;
            border-radius: 2px;
        }

        .pa {
            font-weight: bold;
            max-width: 250px;
            max-lines: 2;
            height: 40px;
            line-height: 20px;
            overflow: hidden;
        }

        .pa:hover {
            color: rebeccapurple;
        }

        .bb {
            color: #93979C;
            font-size: 12px;
        }

        .bc {
            color: #2B333B;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <header class="header">
        <img style="height: 60px;" src="https://www.imooc.com/static/img/index/logo.png" alt="immoc">
        <ul class="header_menu">
            <li>免费课程</li>
            <li>实战课程</li>
            <li>就业班</li>
            <li>专栏</li>
            <li>猿问</li>
            <li>手记</li>
        </ul>
        <ul class="header_menu_right">
            <li>下载APP</li>
            <li><i class="fa cart-plus"></i>购物车</li>
            <li><i class="fa ofbell"></i></li>
            <li>我的课程</li>
            <li>头像</li>
        </ul>
    </header>

    <div class="banner_div">
        <div class="banner">
            <ul>
                <li>前沿/区块链/人工智能</li>
                <li>前端/小程序/JS</li>
                <li>后端/JAVA/Python</li>
                <li>移动/Android/iOS</li>
                <li>云计算/大数据/容器</li>
                <li>运维/测试/数据库</li>
                <li>UI设计/3D动画/游戏</li>
            </ul>
            <img src="https://img.mukewang.com/5d90545e0001e28118720764.jpg" alt="提示文字">
        </div>
        <div class="dj">
            <span>就业班</span>
            <span>零基础快速就业</span>
        </div>
        <ul class="dj_ul">
            <li>
                <img
                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569998487514&di=7d7f1aaea9578652772a47c1119c383a&imgtype=0&src=http%3A%2F%2Fwww.logicsolutions.com%2Fwp-content%2Fuploads%2F2015%2F06%2Fhtml5.png">
                <p>Web前端工程师</p>
                <p>从未接触经验也可以学好</p>
            </li>
            <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569998627337&di=8f706a9abfa4dd66e1fe45d60367b3cb&imgtype=0&src=http%3A%2F%2Fpic.51yuansu.com%2Fpic2%2Fcover%2F00%2F31%2F76%2F5810c9866ceca_610.jpg"
                    alt="">
                <p>Web前端工程师</p>
                <p>从未接触经验也可以学好</p>
            </li>
            <li><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2246437286,3797043391&fm=26&gp=0.jpg"
                    alt="">
                <p>Web前端工程师</p>
                <p>从未接触经验也可以学好</p>
            </li>
            <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569998664542&di=45fa79b0cd7f66c6e385f42bb642f719&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201506%2F28%2F132730d7g9xbx9uo7qxrog.jpg"
                    alt="">
                <p>Web前端工程师</p>
                <p>从未接触经验也可以学好</p>
            </li>
            <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569998680036&di=5216ff5dd448f05b2e4571c354f4b778&imgtype=0&src=http%3A%2F%2Fimage.flaticon.com%2Ficons%2Fpng%2F512%2F919%2F919830.png"
                    alt="">
                <p>Web前端工程师</p>
                <p>从未接触经验也可以学好</p>
            </li>
        </ul>
        <div class="dj">
            <span>职场进阶</span>
            <span>1年以上开发经验系统成长</span>
        </div>
    </div>

    <div class="kc">
        <div class="dj">
            <p>课程推荐</p>
        </div>
        <ul>
            <li>
                <div>
                    <img src="https://img4.mukewang.com/szimg/5d4ceaef09c3cb6612000676-360-202.png">
                    <span>Java</span>
                </div>
                <p><a class="pa">Java并发编程精讲</a></p>
                <div class="bb">中级 999 评分:10.0</div>
                <div class="bc">$348.0</div>
            </li>
            <li>
                <div>
                    <img src="https://img1.mukewang.com/szimg/5ad05dc00001eae705400300-360-202.jpg">
                    <span>算法</span>
                </div>
                <!--  更适合0算法基础入门到进阶（java版） -->
                <p><a class="pa">玩转算法系列--玩转数据结构</a></p>
                <div class="bb">中级 999 评分:10.0</div>
                <div class="bc">$348.0</div>
            </li>
            <li>
                <div>
                    <img src="https://img4.mukewang.com/szimg/5d4ceaef09c3cb6612000676-360-202.png">
                    <span>Java</span>
                </div>
                <p><a class="pa">Java并发编程精讲</a></p>
                <div class="bb">中级 999 评分:10.0</div>
                <div class="bc">$348.0</div>
            </li>
            <li>
                <div>
                    <img src="https://img4.mukewang.com/szimg/5d4ceaef09c3cb6612000676-360-202.png">
                    <span>Java</span>
                </div>
                <p><a class="pa">Java并发编程精讲</a></p>
                <div class="bb">中级 999 评分:10.0</div>
                <div class="bc">$348.0</div>
            </li>
            <li>
                    <div>
                        <img src="https://img4.mukewang.com/szimg/5d4ceaef09c3cb6612000676-360-202.png">
                        <span>Java</span>
                    </div>
                    <p><a class="pa">Java并发编程精讲</a></p>
                    <div class="bb">中级 999 评分:10.0</div>
                    <div class="bc">$348.0</div>
                </li>
                <li>
                    <div>
                        <img src="https://img1.mukewang.com/szimg/5ad05dc00001eae705400300-360-202.jpg">
                        <span>算法</span>
                    </div>
                    <!--  更适合0算法基础入门到进阶（java版） -->
                    <p><a class="pa">玩转算法系列--玩转数据结构</a></p>
                    <div class="bb">中级 999 评分:10.0</div>
                    <div class="bc">$348.0</div>
                </li>
                <li>
                    <div>
                        <img src="https://img4.mukewang.com/szimg/5d4ceaef09c3cb6612000676-360-202.png">
                        <span>Java</span>
                    </div>
                    <p><a class="pa">Java并发编程精讲</a></p>
                    <div class="bb">中级 999 评分:10.0</div>
                    <div class="bc">$348.0</div>
                </li>
                <li>
                    <div>
                        <img src="https://img4.mukewang.com/szimg/5d4ceaef09c3cb6612000676-360-202.png">
                        <span>Java</span>
                    </div>
                    <p><a class="pa">Java并发编程精讲</a></p>
                    <div class="bb">中级 999 评分:10.0</div>
                    <div class="bc">$348.0</div>
                </li>
        </ul>
    </div>

    <footer>

    </footer>
</body>

</html>

练习中知识

设置列表无样式
list-style-type: none;
设置阴影
box-shadow: 0 1px 2px whitesmoke;
设置圆角
border-radius: 8px;
清除浮动
overflow: hidden;

又是满满的一天,搞起!

淘宝首屏静态页面（HTML+CSS）布局练习.zip
05-07
适合刚接触前端基础知识的同学，初步了解了HTML+CSS后，可以尝试练习类似项目；该项目主要为HTML+CSS实现，不涉及交互、逻辑功能，旨在提高样式布局能力
前端学习-常规流练习-入门
01-17
在这个"前端学习-常规流练习-入门"的主题中，我们将深入探讨HTML和CSS的常规流概念，并通过设计稿制作简单的页面来实践这些知识。 首先，HTML是构建网页内容的标记语言，而CSS则是用来表现这些内容的样式语言。HTML...
web前端布局小练习
wgf1997的博客
08-07 643
效果图： 个人实现代码（与原作者有所不同）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g...
2021/3/23--前端布局练习
A444477的博客
03-23 427
2021/3/23–前端布局练习 要求： 解题代码： <!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
前端练习-CSS布局
qq_42385482的博客
02-08 2286
前端练习-CSS布局 文章目录前端练习-CSS布局在线练习一、盒模型CSS1 盒模型 - content-boxCSS2 盒模型 - border-boxCSS3 盒模型- 外边距折叠二、浮动CSS4 浮动CSS5 浮动 - 清除三、定位CSS7 定位 - inheritCSS8 定位 - absoluteCSS9 定位 - absolute - 评注CSS10 定位 - z-indexCSS11 定位 - relativeCSS12 定位 - fixedCSS13 定位 - fixed - 广告四、dis
【web前端开发】HTML及CSS简单页面布局练习
最新发布
Liu_y_xin的博客
02-09 1551
视频播放v.play();.cont{播放/暂停</button><button onclick="big()">放大</button><button onclick="small()">缩小
web前端学习-初学者练习素材
11-06
"web前端学习-初学者练习素材"这个资源包就是为了解决这个问题而设计的，它提供了丰富的练习案例和素材，帮助初学者巩固HTML5的基础知识，提升实践能力。 HTML5是现代Web开发的核心语言，它的出现使得网页内容的...
前端基础-静态页面练习.zip
07-08
总的来说，【前端基础-静态页面练习.zip】是一个全面的前端学习资源，通过它，你可以系统地学习和实践前端开发，增强自己的项目经验和技能。无论是自学还是作为课程作业，这个压缩包都能提供丰富的实践素材，助你在...
前端练习01-前端-HTML实例练习
03-24
本练习主要是针对HTML的实例操作，旨在帮助学习者掌握HTML的基本用法和常见元素，从而能够创建出功能完备、结构清晰的网页。 在"前端练习01-前端-HTML实例练习"中，你将有机会实践以下关键知识点： 1. **HTML基本...
WEB前端技术-表格元素练习
12-27
在Web前端开发中，表格元素是构建数据展示和交互的核心组件之一。本练习主要关注HTML中的`<table>`元素及其相关标记，如`<tr>`, `<th>`, `<td>`等，它们共同构建了一个标准的表格结构。下面将详细讨论这些元素的使用...
前端学习——布局
m0_37829710的博客
05-08 395
1. 盒子模型margin：外边距/边界border：边框padding：内边距/填充以上属性又分上下左右四个方向。元素实际占位尺寸 = 元素尺寸+padding+边框宽度2. 最基础的页面布局结构：   &lt;div id = "container"&gt;           &lt;div id = "header"&gt;&lt;/div&gt;           &lt;div id...
百度前端技术实战训练营——Web布局（上）
qq_62215764的博客
01-12 1180
CSS布局指通过CSS去拾取网页中的元素，并且控制它们相对普通文档流、周边元素、父容器甚至浏览器窗口的位置，覆盖默认的布局行为。\newline合理布局的作用：网站通常分为页眉、菜单、内容和页脚。
前端小练习～网页布局
qq_53142796的博客
04-05 229
前端提高篇（四十四）CSS练习3：flex布局（导航栏，两列三列布局）
安之ccy的博客
03-10 2097
导航栏 <nav> <ul> <li>首页</li> <li>课程</li> <li>教资</li> <li>关于我们</li> </ul> </nav> 基础样式： body, ul, li { margin: 0; padding: 0;
百度前端实战训练营 Web布局(一)
cichu77的博客
01-08 656
Web布局(一)
前端项目练习01-瀑布流练习
weixin_34192993的博客
11-13 219
是我是我又是我，我要在此发誓每个工作日练一个前端小项目，并把大致思路和部分代码以及总结心得发在这里，请诸位监督，鞠躬感谢O(∩_∩)O谢谢 瀑布流设计主要是计算最小块的高度并自动填充。设计思路如下： 原生js设计： 1）分块，整体页面为一个分块，设为main.main中分成若干个cage,cage中再加入photo块，photo块中再放入图片。 ...
【前端】前端练习
longlongfishday的博客
10-04 450
iframe的缺点： ①产生很多页面，不便管理 ②iframe提供一种简单的方式把一个网站内容嵌入另一个网站，但iframe的创建会比其他创建慢一些。它调用了外部的页面，增加服务器请求次数。 ③iframe会阻塞主页面的Onload事件及iframe和主页面共享连接池，会影响页面的并行加载。 ④浏览器后退按钮失效，不易打印，代码复制等 ⑤为提高速度采取动态创建和销毁iframe方...
前端 特征布局实例练习
cc576795555的博客
12-28 251
&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;作业1228&amp;lt;/title&amp;g
深入学习前端：CSS2.1练习代码解析
本资源中的'前端练习代码之css2.1'正是基于这样的目的而设计，供学习者通过实践活动来巩固和提高CSS技能。 1. CSS基础概念 CSS（Cascading Style Sheets）层叠样式表，是一种用于描述网页表现形式的语言，它与HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值