案例
独特的懒人
一个懒人
展开
-
(案例)品优购-注册页面制作
布局可以分成三个部分 注册页面命名:register.html 注意:注册页面怎么简单怎么写,保护隐私不需要优化 有高度522px,四个边框。 左边是直接写在h3里面了,右边新建一个盒子,给一个浮动 2.重点:底部的表单区域的做法 思路:这个父盒子给一个名字reg-form并且给一个宽度,然后里面按照ul>li来制作,手机号用lable来做 <ul> <li><lable for="">手机号: </lable><input type="tex原创 2020-08-16 14:04:08 · 714 阅读 · 0 评论 -
(案例)品优购-list页面制作
准备工作: last-child 和nth-child 不能选到表兄弟,只能选到亲兄弟,所以下面是这么写 列表页主体 都是先给一个w的盒子 然后给sk_container 重要重要重要:碰到的问题,以及解决方案 本来给定一个左右浮动的话 123应该是在左边,abc应该是在右边。但是图中123的位置不对了。 这边的高度是47px 但是我们给它的行高是49px 给他挤下来了,然后里面的女装,更多分类都是浮动的,浮动是不会压住文字的。所以出现了这种情况。 **解决方法:**把超出的部分切除掉 .nav { o原创 2020-08-16 13:27:03 · 590 阅读 · 0 评论 -
(案例)品优购-index主体页面制作
新建一个新的index.css 写index的样式 1. main主体模块制作 这里面main盒子的宽度和高度都要写980px *455px focus的宽度和高度也是需要写的 721px*455px 左浮动 float:left; newsflash 的宽度和高度 250p*455px 右浮动 float:right Focus里面的图片不能直接插入图片,要用ul>li>img js的时候好控制 Focus里面的图片不能直接插入图片,要用ul>li>img js的时候好控制原创 2020-08-16 00:03:22 · 462 阅读 · 0 评论 -
(案例)品优购项目-公共部分header和footer的制作
2. nav导航栏制作 这边是一个通栏的盒子不需要给宽度,给一个高度47px再给一个下边框就可以了。 左边给定一个div盒子叫做dropdown,右边给定一个div盒子叫做navitems,因为都是块级元素,这里给一个左浮动。 dropdown要给一个宽度210px,给一个高度45px,再给一个背景颜色,高度是放在盒子里面的就不要量下边框 dropdown盒子的细节: 这边要看上下布局的细节(上下按照相关性应该放在一起的) - 根据相关性 ...原创 2020-08-15 21:59:40 · 524 阅读 · 0 评论 -
【布局技巧】margin负值的运用
使用场景: 像淘宝一样放在一个产品上的时候盒子会显示一个紫色的框子,但是当我们给所有的盒子边框,且浮动的时候。两个边框就会重叠,颜色就会很深,这里就给整个盒子margin-left:-1px <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s原创 2020-08-14 15:17:52 · 430 阅读 · 0 评论 -
(案例) 京东三角案例
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京东三角案例</title> <style> * {原创 2020-08-14 13:22:25 · 276 阅读 · 0 评论 -
案例:土豆网鼠标经过显示遮罩
练习元素的显示和隐藏 练习元素的定位 核心原理: 原先的半透明黑色遮罩看不见,鼠标经过大盒子,就显现出来了(鼠标经过大盒子,里面的mask就显现出来了) 遮罩的盒子不占有位置就要使用绝对定位(绝对定位是不占有位置的)和display(不占有原来的位置)配合使用 代码部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="v..原创 2020-08-14 10:27:05 · 460 阅读 · 0 评论 -
学成在线(案例)
学成在线 2. CSS属性书写顺序(重点) 生活中衡量一个人有气质: 穿着打扮 举止言行 等等 编程中如何衡量一个人的代码能力: 规范标准 优雅高质量 等等 一个词形容 专业 从代码中看出是否有经验… 建议遵循以下顺序: 布局定位属性:display / position / float / clear / visibility / overflow(建议 display 第一个写,毕竟关系到模式) 自身属性:width / height / margin / padding原创 2020-08-13 16:18:46 · 1585 阅读 · 2 评论