![](https://img-blog.csdnimg.cn/20200804102512149.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
HTML+CSS
文章平均质量分 72
学习过程中遇到的习题
睡觉对我来说很重要
这个作者很懒,什么都没留下…
展开
-
HTML+CSS浮动布局练习:小米商城手机模块
小米商城手机模块题目:利用所学浮动知识点,实现如下效果。思路:整体看成一个大盒子,大盒子分成左右两大块,左边盒子放置一张图片,右边又分成8个小模块,利用margin设计两个模块间的距离。实现代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init原创 2020-08-06 10:01:24 · 2792 阅读 · 0 评论 -
HTML+CSS 浮动布局练习:小米商城产品布局
小米商城产品布局题目描述:使用CSS浮动布局完成如下效果。思路:将整体看成一个大盒子,每个产品图片介绍看成一个小盒子,依次放进大盒子中,产品按照一定的间距隔开。可以使用无序列表来实现,将其设置成浮动布局就拥有行内块的特征了。需要值得注意的是:列表拥有默认的内外边距,需要将内外边距设置成0,li前面默认有项目符号,需去除。还需要注意权重问题。实验代码:<!DOCTYPE html><html lang="en"><head> <meta char原创 2020-08-04 22:06:52 · 1833 阅读 · 0 评论 -
HTML+CSS浮动布局练习:小米商城导航栏
小米商城首页问题描述:利用刚学知识创建如下图样式的页面。思路:由图可知,该部分分为左右两个板块,可以使用2个div盒子进行放置内容,并且左右两部分是无间隔连接在一起的,所以可以考虑使用CSS浮动,将左右两个板块放置在一个大的div盒子中。使用微信或者QQ截图工具读取出侧边栏----width: 350px; height: 700px; background-color: rgb(108,119,116); 当鼠标移动到对应图标上时,background-color: rgb(255,103,0);原创 2020-08-04 11:00:22 · 1902 阅读 · 0 评论