css布局基础:盒子模型练习 孙萍 • 2020年4月4日 上午7:57 • 网页设计 • 阅读 5656 主要知识点: 1、盒子在页面的显示=margin+border+padding+width/height 2、每个html元素都可以抽象为一个盒子 效果图: 参考: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css布局基础:盒子模型练习|www.125jz.com</title> <style> * { margin: 0; padding: 0; } /*覆盖默认样式*/ ul li { width: 100px; height: 40px; line-height: 40px; text-align: center; list-style: none; background-color: dimgrey; color: white; border-bottom: 1px solid white; } h3 { height: 50px; line-height: 50px; width: 100px; background-color: #000000; color: wheat; text-align: center; border-bottom: 1px solid #FFFFFF; } ul { display: none; margin-left: 50px; } div:hover ul { display: inline-block; } </style> </head> <body> <div> <h3>家电</h3> <ul> <li>冰箱</li> <li>洗衣机</li> <li>空调</li> </ul> </div> <div> <h3>洗护</h3> <ul> <li>洗衣液</li> <li>牙膏</li> <li>护发素</li> </ul> </div> <div> <h3>衣物</h3> <ul> <li>男装</li> <li>女装</li> <li>童装</li> </ul> </div> </body> </html> Tips:You can change the code before run. 本文来自投稿,不代表125jz立场,如若转载,请注明出处:http://www.125jz.com/5529.html borderCSSmarginpadding盒子 赞 (1) 孙萍管理团队 0 0 打赏 微信扫一扫 支付宝扫一扫 生成海报 css布局基础:浮动和清除浮动练习2 上一篇 2020年4月4日 上午7:51 css布局基础:定位练习1 下一篇 2020年4月4日 上午8:22 99%的人还看了以下文章 如何做好视觉设计中的层次?(精) 对于视觉次序(视觉层次)的营造是每个设计师所必须精通的,无论是海报设计还是页面设计,从整体来看总会有强弱、主次之分,因为有了视觉上的变化,才使得整体更富有层次感;当用户在浏览信息很多的网页时,作为设计师要做到:即使用户只是简单的浏览,也要有能在用户脑海中形成记忆的视觉元素,而这些元素就是视觉中的主,而当用户仔细阅读时才能记忆到的元素才是视觉上的次;从局部来说… 江山如画 2018年7月9日 • 网页设计 12.9K00 设计师如何构建自己的知识体系? 最近几年能看到各行各业越来越多关于知识体系化的文章话题被关注,一定程度上说明在当前社会发展中,大家越来越重视个人知识体系化的积累。本篇文章将围绕知识体系为主题,会涉及到很多不同纬度的知识内容展开。 为什么要构建知识体系 第一,系统化知识,可以帮助我们更高效学习,节省学习中大量不必要的时间; 第二,学习吸收进来的知识点及时纳入体系里,可以让知识记得更加牢固; … 江山如画 2022年8月10日 • 网页设计 11.2K00 太好看了!8个惊艳的蓝色渐变色 江山如画 2023年1月20日 • 网页设计 4.5K00 网页制作中表单的设计及优化方法 表单是网页制作中常用的元素,本文会探讨表单设计的注意事项。但这些只是通用规范,每条准则总有特殊情况。 表单应该只有一列 多列布局会扰乱用户垂直方向的视线移动。 把标签放到顶部 顶部标签的表单比左侧标签有更高的完成率。顶部标签的表单也易于移植到移动端。但是,对于有多种选择项的大量数据列表而言,请考虑使用左侧标签,因为它们在一起更易于浏览,能够减少高度,比顶部标… 江山如画 2018年7月30日 • 网页设计 8.9K00 网页制作实战项目二:爱的天空 请加入网页设计交流群:208047327 ,在项目制作过程中有任何问题,可以在群内讨论,或进入本站问答社区互动。 【时间要求】 2 学时( 45 分钟× 2=90 分钟) 【上机内容】 《爱的天空》主页面及心情日志页面制作 【上机目的】 1 、巩固表格布局的方法和技巧 2 、掌握HTML及CSS的使用 【上机重点】 1 、表格布局 2 、HTML及CSS的使… 江山如画 2018年4月12日 • 网页设计 17.5K014 网页设计中最常用的7款字体 字体主要分为衬线字和无衬线字。网站制作中,选用什么样的字体是比较重要。 衬线字和无衬线字的区别:左边的中文和英文字属于衬线字,右边中文和英文属于无衬线字。 衬线字指的是在字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同。 如宋体,观察比划可以看到横细竖粗的特点,这就是典型的称线字。 无衬线字体没有这些额外的装饰,而且笔画的粗细差不多。比如微软雅… 江山如画 2019年10月22日 • 网页设计 10.5K03 发表回复 请登录后评论...登录后才能评论 提交