独特的懒人-优快云博客

原创 HTML5 & CSS3 学习导读

HTML5 & CSS3 以下都是有兼容性问题的新的标签新的表单新的表单属性 1. 新增的语义化标签 header 头部 nav 导航栏 article 内容标签 section 定义文档某个区域 aside 侧边栏标签 footer 尾部标签

2020-08-14 16:11:53 300

原创移动WEB开发

移动WEB开发重难点 CSS 3D转换 Flex伸缩布局 Less rem 媒体查询 Bootstrap 移动式网页布局响应式网页布局

2020-08-18 14:08:43 255

布局可以分成三个部分注册页面命名:register.html 注意:注册页面怎么简单怎么写，保护隐私不需要优化有高度522px，四个边框。左边是直接写在h3里面了，右边新建一个盒子，给一个浮动 2.重点:底部的表单区域的做法思路:这个父盒子给一个名字reg-form并且给一个宽度，然后里面按照ul>li来制作,手机号用lable来做 <ul> <li><lable for="">手机号: </lable><input type="tex

2020-08-16 14:04:08 866

原创 (案例)品优购-list页面制作

准备工作: last-child 和nth-child 不能选到表兄弟，只能选到亲兄弟，所以下面是这么写列表页主体都是先给一个w的盒子然后给sk_container 重要重要重要:碰到的问题，以及解决方案本来给定一个左右浮动的话 123应该是在左边，abc应该是在右边。但是图中123的位置不对了。这边的高度是47px 但是我们给它的行高是49px 给他挤下来了，然后里面的女装，更多分类都是浮动的，浮动是不会压住文字的。所以出现了这种情况。 **解决方法:**把超出的部分切除掉 .nav { o

2020-08-16 13:27:03 742

原创 (案例)品优购-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 603

原创 (案例)品优购项目-公共部分header和footer的制作

2. nav导航栏制作这边是一个通栏的盒子不需要给宽度，给一个高度47px再给一个下边框就可以了。左边给定一个div盒子叫做dropdown,右边给定一个div盒子叫做navitems，因为都是块级元素，这里给一个左浮动。 dropdown要给一个宽度210px，给一个高度45px，再给一个背景颜色，高度是放在盒子里面的就不要量下边框 dropdown盒子的细节: 这边要看上下布局的细节(上下按照相关性应该放在一起的) - 根据相关性 ...

2020-08-15 21:59:40 676

原创【布局技巧】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 565

原创 (案例) 京东三角案例

代码 <!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 413

原创案例:土豆网鼠标经过显示遮罩

练习元素的显示和隐藏练习元素的定位核心原理: 原先的半透明黑色遮罩看不见，鼠标经过大盒子，就显现出来了(鼠标经过大盒子，里面的mask就显现出来了) 遮罩的盒子不占有位置就要使用绝对定位(绝对定位是不占有位置的)和display(不占有原来的位置)配合使用代码部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="v..

2020-08-14 10:27:05 651

原创学成在线(案例)

学成在线 2. CSS属性书写顺序（重点）生活中衡量一个人有气质：穿着打扮举止言行等等编程中如何衡量一个人的代码能力：规范标准优雅高质量等等一个词形容专业从代码中看出是否有经验… 建议遵循以下顺序：布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）自身属性：width / height / margin / padding

2020-08-13 16:18:46 1819 2

原创 HTML & CSS 小纪

div里面放图片，这个时候想要实现图片居中，就必须给div指定一个宽度和高度，一般这里给定div的盒子大小就是图片的大小 <style> .dianbo { width: 426px; height: 260px; margin: 0 auto; } </style> <div class="dianbo"> <img src="./imag.

2020-08-13 09:33:05 170

原创 CSS学习线路导读

文章目录CSS好好 “表现”（presentation）1. CSS作用：美化，布局,让结构(html)和样式"css"分离2. 构成：3. CSS标签选择器(基础选择器 / 复合选择器)3.1. 标签选择器(用标签名作为选择器)3.2. 类选择(重点) 可以先定义，**谁调用就写在谁身上**,书写注意事项: **冒号后面空一格**3.3 id选择器3.4 通配符选择器4. CSS字体属性(字体系列，大小，粗细，文本样式(斜体，加粗))4.1 字体系列：`font-family`**在页面中通常是给b

2020-08-11 22:03:29 1333

原创 HTML学习笔记

基础学习路线 HTML 5基础占比 20% CSS3 基础 50% H5C3提高 10% （未来发展趋势）品优购占比20% 重点 1.1 HTML 5基础什么是网页 ? 网站是网页的集合，通常是HTML文件，需要浏览器阅读。包含图片，文字，视频，歌曲等元素组成的常用浏览器 firefox chrome/ Opera Safari ie 内核: Gecko Blink(webkit分支) Webki

2020-08-11 18:25:21 314

独特的懒人