css练习2

已于 2023-10-26 11:43:06 修改
阅读量50 收藏
点赞数
分类专栏： web前端 文章标签： css 前端
于 2023-07-25 22:59:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74852435/article/details/131924536
版权

1.小米布局大概

 html：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./小米布局大概.css">
</head>

<body>
    <div class="goods">
        <div class="left"></div>
        <div class="right">
            <ul>
                <li>
                    <a href="#">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202305241112_ecb14876904f09f3cbc605350a02eff0.png?thumb=1&w=250&h=250&f=webp&q=90" alt="" width="160px" height="160px">
                        <h3>Xiaomi Civi 3</h3>
                     <p>仿生双眸&nbsp;天生双色</p>
                     <div>2499元起</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202305241112_ecb14876904f09f3cbc605350a02eff0.png?thumb=1&w=250&h=250&f=webp&q=90" alt="" width="160px" height="160px">
                        <h3>Xiaomi Civi 3</h3>
                     <p>仿生双眸&nbsp;天生双色</p>
                     <div>2499元起</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202305241112_ecb14876904f09f3cbc605350a02eff0.png?thumb=1&w=250&h=250&f=webp&q=90" alt="" width="160px" height="160px">
                        <h3>Xiaomi Civi 3</h3>
                     <p>仿生双眸&nbsp;天生双色</p>
                     <div>2499元起</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202305241112_ecb14876904f09f3cbc605350a02eff0.png?thumb=1&w=250&h=250&f=webp&q=90" alt="" width="160px" height="160px">
                        <h3>Xiaomi Civi 3</h3>
                     <p>仿生双眸&nbsp;天生双色</p>
                     <div>2499元起</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202305241112_ecb14876904f09f3cbc605350a02eff0.png?thumb=1&w=250&h=250&f=webp&q=90" alt="" width="160px" height="160px">
                        <h3>Xiaomi Civi 3</h3>
                     <p>仿生双眸&nbsp;天生双色</p>
                     <div>2499元起</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202305241112_ecb14876904f09f3cbc605350a02eff0.png?thumb=1&w=250&h=250&f=webp&q=90" alt="" width="160px" height="160px">
                        <h3>Xiaomi Civi 3</h3>
                     <p>仿生双眸&nbsp;天生双色</p>
                     <div>2499元起</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202305241112_ecb14876904f09f3cbc605350a02eff0.png?thumb=1&w=250&h=250&f=webp&q=90" alt="" width="160px" height="160px">
                        <h3>Xiaomi Civi 3</h3>
                     <p>仿生双眸&nbsp;天生双色</p>
                     <div>2499元起</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202305241112_ecb14876904f09f3cbc605350a02eff0.png?thumb=1&w=250&h=250&f=webp&q=90" alt="" width="160px" height="160px">
                        <h3>Xiaomi Civi 3</h3>
                     <p>仿生双眸&nbsp;天生双色</p>
                     <div>2499元起</div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>

css：

* {
    padding: 0;
    margin: 0;
}

a{
    text-decoration: none; 
}

.goods {
    display: flex;
    width: 1240px;
    height: 600px;
    border: 2px solid black;
    margin: 0 auto;
}

.left {
    margin-right: 20px;
    width: 300px;
    height: 600px;
    background-color: pink;
}

.right ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    width: 990px;
    height: 600px;
}

ul li {
     list-style: none;
    width: 230px;
   height: 275px;
    background-color: rgb(9, 188, 237);
}

2.小米商城布局大概

 html：

<!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>Document</title>
    <link rel="stylesheet" href="./小米商城布局.css">
</head>
<body >
    <!-- 上半部分 -->
    <div class="head-nav">
        <div class="mid">
            <div class="logo">
              <img src="./图片素材/logo.png" >
            </div>
            <div class="nav-bar">
                <ul type="none">
                    <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>
                    <li><a href="#" > 服务 </a></li>
                    <li><a href="#" > 社区 </a></li>
                </ul>
            </div>
            <div class="search">
                <input type="text" placeholder="搜索">
                <button class="find"></div></button>
            </div>
        </div>
    </div>
    <!-- 下半部分 -->
    <div class="banner">
        <div class="mid">
            <div class="banner-img">
                <img class="banner-img" src="../images/bg03.jpg">
            </div>
            <div class="daohang">
                <ul type="none">
                    <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>
                    <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>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

css：

* {
    padding: 0;
    margin: 0;
}

a{
    text-decoration: none; 
}

.mid{
    width: 1226px;
    margin: 0 auto;
}

.head-nav{
    width: 100%;
    height: 100px;
    background-color: aliceblue;
}

.logo{
    width: 55px;
    height: 55px;
    background-color: orange;
    float: left;
    margin-top: 22.5px;
    overflow: hidden;
}

.nav-bar{
    width: 875px;
    height: 100px;
    line-height: 100px;
    float: left;
}

.nav-bar li{
    float: left;
}

.nav-bar li a{
    color: black;
    padding: 0 10px ;
}

.search{
    width: 296px;
    height: 100px;
    float: right;
    margin-top: 25px;
}

.search input{
    width: 244px;
    height: 50px;
    float: left;
    box-sizing: border-box;
}

.search button{
    width: 52px;
    height: 50px;
    float: right;
}

.banner{
    width: 100%;
    height: 460px;
}

.banner-img{
    width: 100%;
    background-color: pink;
}

.daohang{
    width: 234px;
    height: 420px;
    padding: 20px 0;
    background-color: aqua;
    position: absolute;
    left: 0;
    top: 0;
}

.banner>.mid{
    position: relative;
}

.daohang>ul>li{
    height: 42px;
    line-height: 42px;
    text-align: center;
}

Ll Lin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div css练习div css练习div css练习div css练习
04-20
div css练习
CSS综合练习
weixin_46331127的博客
06-08 1264
Div+css综合练习一、css小动画二、Div+css练习 一、css小动画 这是我学习css之后写的第一个小动画模型哦，看着有点多，但是不难，都是之前学习内容的衍生，想要学习的就来看看叭 别的不说了，代码粘起来，希望可以帮到你！ <style> #box1{ margin: 0 auto; width: 500px; height: 500px;
css常用demo练习
SundayGoG的博客
05-30 1612
1.横向弹性布局，溢出的部分换行 flex布局实现不同分辨率屏幕显示效果不同，”自适应布局“ (flex-flow是flex-direction和flex-wrap的复合属性） display:flex; flex-flow:wrap; white-space: nowrap; text-overflow: ellipsis; 2.文字多余部分用省略号表示 over-flow:hidden; white-space:nowarp; text-overflow:ellipsis; 3.弹性布局，水平均匀间
css布局练习
shiyu18的博客
10-28 810
css练习 css练习布局，并完成一下布局: 要求:主要练习布局，并且精简代码（浏览器加载时 提升浏览器加载速度） 分析:除首航文字外，其余部分均是图片，并且一二行图片和三四行图片间距，宽高相等。 代码实现: 1.html部分： <!doctype html> <html> <head> <meta charset="utf-8"> <title>2</title> <link rel="stylesheet" ty
CSS练习
Null
04-09 968
实现效果图 代码实现： <!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"> &l
css餐厅练习
m0_57093454的博客
12-27 955
css餐厅练习地址 以下答案都一个个试过，应该是没有错，有任何疑问可以评论区留言，看到会及时回答 1.选择plate（元素选择器） 参考答案：plate 2. 选中所有bento(元素选择器） 参考答案: bento 3.选择id名为fancy的盘子(id选择器) 参考答案: #fancy 4. 选中一个apple，这个apple的父亲元素是plate(关系选择器) 参考答案：plate>apple 5.选中一个在id为fancy的盘子里的pickle（复合...
CSS基础练习题
m0_57048774的博客
06-01 706
CSS基础练习题
练习 | css页面练习案例
A123ppleQueen的博客
06-09 687
纸质卡片
前端练习-CSS布局
qq_42385482的博客
02-08 1750
前端练习-CSS布局 文章目录前端练习-CSS布局在线练习一、盒模型CSS1 盒模型 - content-boxCSS2 盒模型 - border-boxCSS3 盒模型- 外边距折叠二、浮动CSS4 浮动CSS5 浮动 - 清除三、定位CSS7 定位 - inheritCSS8 定位 - absoluteCSS9 定位 - absolute - 评注CSS10 定位 - z-indexCSS11 定位 - relativeCSS12 定位 - fixedCSS13 定位 - fixed - 广告四、dis
CSS练习之自动打字机
m0_62622679的博客
01-11 978
使用CSS实现打字机效果
CSS练习三(盒子练习)
屈帅波的技术博客
05-23 1595
练习题1 <!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
html css 练习素材
01-02
html css 练习素材
css模板练习
11-18
css模板，学习使用，练习
css3 操作练习
03-01
css3 操作练习
css练习_css_
09-28
这是一个非常好的css项目文件，他能让你减少大量的开发时间
JavaWeb-01：HTML,CSS,JavaScript,DOM的理解
博客
05-17 139
HTML,CSS,JavaScript,DOM的理解
CSS中的writing-mode属性：解锁文本布局新维度
最新发布
艾恩小灰灰的博客
05-21 206
属性定义了文本在块级元素中的书写方向，它决定了文本是水平还是垂直排列，以及是从左到右、从右到左，还是从上到下显示。这对于支持多种语言的排版（如东亚语言的竖排文本）和创造非传统布局至关重要。属性虽小，却蕴藏着改变文本布局的巨大能量。无论是为了文化尊重、设计创新还是提升用户体验，掌握并灵活运用这一属性，都能让你的设计作品更加丰富多彩。随着Web技术的不断进步，我们有理由相信，未来将在更多领域展现出其独特的魅力。希望本文能够激发你对CSS这一鲜为人知特性的探索兴趣，开启你的创意之旅。
css sprites如何使用
codedadi的博客
05-18 393
注意：确保在定位图标时考虑到大图像的尺寸和每个图标的尺寸。例如，如果每个图标都是32x32像素的，并且它们在大图像中水平排列，那么第一个图标的background-position是0 0，第二个图标的background-position是-32px 0，依此类推。在CSS中，定义.icon类以设置所有图标的通用样式（如大小、背景图像等），并为每个图标定义特定的background-position。/* 图标2在大图像中的位置（假设每个图标宽度为32px） *//* 图标1在大图像中的位置 */
css笔记总结2
fishniu35的博客
05-15 440
标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。4.类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。2.类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。3.id 选择器和类选择器最大的不同在于使用次数上。
css移动端布局练习
09-16
2. 弹性盒子布局：弹性盒子布局（Flexbox）是CSS中一种用于创建灵活的、自适应的布局的技术。它可以使元素在容器内自动调整大小和位置，适应不同尺寸的屏幕。使用弹性盒子布局可以更方便地实现移动端页面的布局。 3...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值