前端学习笔记（HTMLCSS）（06）CSS盒子模型练习
2024-05-16 07:07:17
前端学习笔记（HTML&CSS）（06）
练习一：图片列表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>图片列表</title><link rel="stylesheet" href="./css/reset.css"><style>body{background-color: antiquewhite}.img-list{width: 190px;height: 470px;overflow: hidden;margin: 50px auto;background-color: #F4F4F4;}.img-list li:not(:last-child){margin-bottom: 9px;}.img-list img{width: 100%;}</style>
</head>
<body><ul class="img-list"><li><a href="javascript:;"><img src="./img/01/1.jpg" alt=""></a></li><li><a href="javascript:;"><img src="./img/01/2.jpg" alt=""></a></li><li><a href="javascript:;"><img src="./img/01/3.jpg" alt=""></a></li></ul></body>
</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/reset.css"><style>body{background-color: #bfa;}.left-s{width: 190px;height: 450px;background-color: #fff;margin: 60px auto;padding: 10px 0;}.left-s .item{height: 25px;line-height: 25px;padding-left: 18px;}.item span{font-size: 12px;padding: 0 2px;}.item:hover{background-color: khaki;}.item a:hover{color:red;}.item a{font-size: 14px;text-decoration: none;}</style>
</head><body><nav class="left-s"><div class="item"><a href="#">家用电器</a></div><div class="item"><a href="#">手机</a><span class='line'>/</span><a href="">运营商</a><span class='line'>/</span><a href="#">数码</a></div><div class="item"><a href="#">电脑</a><span class='line'>/</span><a href="#">办公</a></div><div class="item"><a href="#">家居</a><span class='line'>/</span><a href="#">家具</a><span class='line'>/</span><a href="#">家装</a><span class='line'>/</span><a href="#">厨具</a></div><div class="item"><a href="#">男装</a><span class='line'>/</span><a href="#">女装</a><span class='line'>/</span><a href="#">童装</a><span class='line'>/</span><a href="#">内衣</a></div><div class="item"><a href="#">美妆</a><span class='line'>/</span><a href="#">个护清洁</a><span class='line'>/</span><a href="#">宠物</a></div><div class="item"><a href="#">女鞋</a><span class='line'>/</span><a href="#">箱包</a><span class='line'>/</span><a href="#">钟表</a><span class='line'>/</span><a href="#">珠宝</a></div><div class="item"><a href="#">男鞋</a><span class='line'>/</span><a href="#">运动</a><span class='line'>/</span><a href="#">户外</a></div><div class="item"><a href="#">房产</a><span class='line'>/</span><a href="#">汽车</a><span class='line'>/</span><a href="#">汽车用品</a></div><div class="item"><a href="#">母婴</a><span class='line'>/</span><a href="#">玩具乐器</a></div><div class="item"><a href="#">食品</a><span class='line'>/</span><a href="#">酒类</a><span class='line'>/</span><a href="#">生鲜</a><span class='line'>/</span><a href="#">特产</a></div><div class="item"><a href="#">艺术</a><span class='line'>/</span><a href="#">礼品鲜花</a><span class='line'>/</span><a href="#">农资绿植</a></div><div class="item"><a href="#">医药保健</a><span class='line'>/</span><a href="#">计生情趣</a></div><div class="item"><a href="#">图书</a><span class='line'>/</span><a href="#">文娱</a><span class='line'>/</span><a href="#">电子书</a></div><div class="item"><a href="#">机票</a><span class='line'>/</span><a href="#">酒店</a><span class='line'>/</span><a href="#">旅游</a><span class='line'>/</span><a href="#">生活</a></div><div class="item"><a href="#">理财</a><span class='line'>/</span><a href="#">众筹</a><span class='line'>/</span><a href="#">白条</a><span class='line'>/</span><a href="#">保险</a></div><div class="item"><a href="#">安装</a><span class='line'>/</span><a href="#">维修</a><span class='line'>/</span><a href="#">清洗</a><span class='line'>/</span><a href="#">二手</a></div><div class="item"><a href="#">工业品</a></div></nav>
</body>
</html>
前端学习笔记（HTMLCSS）（06）CSS盒子模型练习相关推荐
- Web前端学习笔记05：CSS_盒子模型_复合选择器_标签显示 模式_三大特性_书写规范
文章目录 1. CSS复合选择器 1.1 后代选择器(重点) 1.2 子元素选择器 1.3 交集选择器 1.4 并集选择器(重点) 测试题 1.5 链接伪类选择器(重点) 1.6 复合选择器总结 2. ...
- css盒子模型圆形运用,【前端】CSS3学习笔记（三）——盒子模型
✨课程链接 [狂神说Java]CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili ✨学习笔记 盒子模型 Title /* body 总有一个默认的外边距 */ /* 常见操作 */ body ...
- 【前端学习之HTMLCSS】-- 视觉格式化模型之二 浮动 -- 练习
[前端学习之HTML&CSS]-- 视觉格式化模型之二 浮动 – 练习 文章目录 [前端学习之HTML&CSS]-- 视觉格式化模型之二 浮动 -- 练习 前言 设计稿/原有样式 代码 ...
- CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- html盒子模型图片居中,html学习笔记（img+body+盒子模型+块级元素居中+margi塌陷+float+文字围绕、打点）...
1.使用img产生间隔问题 img属于行级块级元素(标签)其属性display的值为inline-block,因有inline元素,故有文字属性,如果换行使用多个img标签来显示图片的时候,因换行带来 ...
- 【前端学习之HTMLCSS】-- CSS第三篇 -- 选择器（上）
[前端学习之HTML&CSS]-- CSS第三篇 – 选择器(上) 文章目录 [前端学习之HTML&CSS]-- CSS第三篇 -- 选择器(上) 前言 选择器 简单选择器 1. ID ...
- html盒模型中border的写法,HTML+css盒子模型案例(圆，半圆等)“border-radius” 简单易上手...
很多小伙伴在前端学习的时候,发现盒子模型默认为正方形.如何把盒子变成想要的模型呢? 首先我们来看一下默认的情况---- .box{ width: 100px; height: 100px; backg ...
- 前端笔记 | CSS盒子模型
CSS盒子模型 一.盒子模型 1.1 网页布局的本质 1.2 盒子模型的组成 1.3 边框border 1.4 内边距padding 1.5 外边距margin 1.6 清除内外边距 二.特殊样式 2 ...
- 前端面试+学习笔记（HTML+CSS+JavaScript+ES6+Vue+NodeJs）
前端面试+学习笔记(HTML+CSS+JavaScript+ES6+Vue+NodeJs) 一. HTML 1. 盒子模型 是什么:每个元素被表示为一个矩形的盒子,有四个部分组成:内容(content ...
最新文章
- GD32的flash读、擦除、写操作
- 计算机语言import,python中import指的是什么意思
- php 小数点 乘法,js小数点数字相乘、把小数点四舍五入保留两位小数
- 【OS】操作系统运行环境
- 贪心算法之阿里巴巴与四十大盗（背包问题）
- POJ 1222 1681 1830 3185 开关灯问题 (高斯消元 异或方程组)
- MySQL多项模糊查询
- Python入门级教学之（Python中的输出函数）
- php中arraymultisort,php 数组函数array_multisort()用法
- java break和return的区别_【java】break,continue和return区别
- oracle介质恢复的内部过程--推断与参考
- Mybatis 框架源码解读（详细流程图+时序图）
- 2017.3.29 报表统计 思考记录
- myeclipse中如何为一个项目配置spring
- ORACLE——ROWNUM解析（使用ROWNUM大于条件，无法得到任何查询结果）
- 帆软FineMobile 消息推送/定时调度
- [转贴]Unix-Center.Net需要您的帮助
- matlab对两组数据画图,matlab两列数据画图
- Vue错误 Module not found：Error：Can‘t resolve ‘vue/types/umd‘ in ......
- buzz fizz 翻译_【Oxford-2】The Fizz-Buzz