随笔档案「2021年10月」 - 墨染一生

2d-3d转换

摘要：####1. 2d转换（transform）属性：移动：translate 旋转：rotate 缩放：scale #####1.1 二维坐标系 2D转换是改变标签在二维平面上的位置和形状的一种技术 #####1.2 2d转换之移动translate 1.语法： 2.重点例子：水平垂直居中对齐阅读全文

posted @ 2021-10-28 13:13 墨染一生阅读(278) 评论(0) 推荐(0)

品优购

摘要：###1.项目规划 ####1.1网站制作流程 ####1.2品优购整体项目介绍项目名称：品优购项目描述xxx ####1.3 学习目的掌握pc端部分 ####1.4 开发工具及技术栈 ####1.5 搭建工作 #####模块化开发 ####1.6网站favicon图标 #####1.制作fa 阅读全文

posted @ 2021-10-22 22:49 墨染一生阅读(287) 评论(0) 推荐(0)

css3新属性

摘要：####1.选择器 #####1.1 属性选择器点击查看代码 <style> /* 必须是input 但是同时具有 value这个属性选择这个元素 [] */ /* input[value] { color:pink; } */ /* 只选择 type =text 文本框的input 选取出来阅读全文

posted @ 2021-10-21 23:07 墨染一生阅读(72) 评论(0) 推荐(0)

常见布局技巧

摘要：####1.margin负值妙用点击查看代码 ul li { float: left; list-style: none; width: 150px; height: 200px; border: 1px solid red; margin-left: -1px; } 解析：先看1盒子，执行ma 阅读全文

posted @ 2021-10-19 22:59 墨染一生阅读(88) 评论(0) 推荐(0)

用户界面

摘要：####1.鼠标样式语法：选择器:{cursor:属性值} | 属性 |作用 | | | | | pointer | 小手样式 | |move|移动样式| |text|文本样式| |not-allowed|禁止样式| ####2.取消表单轮廓与拖曳文本域语法选择器:{outline: none 阅读全文

posted @ 2021-10-19 22:02 墨染一生阅读(115) 评论(0) 推荐(0)

精灵图等

摘要：####1.精灵图 #####1.1为什么使用精灵图显示一张图片需要一条请求，显示n张图片需要n条请求因此采用精灵技术，有效减少服务器发生和请求的次数，提高页面加载速度。 #####1.2使用精灵图核心主要针对背景图，就是把多个背景图片整合到一张大图中例如：移动背景图片位置，此时可以用ba 阅读全文

posted @ 2021-10-17 22:31 墨染一生阅读(59) 评论(0) 推荐(0)

元素的显示与隐藏

摘要：####display 用法： 1.display:none 不占有原先位置，隐藏元素 2.display:block 转换为块元素，并显示元素后面应用极其广泛，搭配js可做很多的网页特效 ####visibility 1.hidden 占有原先位置，隐藏元素 2.visible 显示元素 ### 阅读全文

posted @ 2021-10-17 20:54 墨染一生阅读(67) 评论(0) 推荐(0)

定位

摘要：###1.1为什么需要定位定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子. ###1.2 定位的组成定位∶将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。定位=定位模式＋边偏移。定位模式用于指定一个元素在文档中的定位方式。边偏移阅读全文

posted @ 2021-10-12 12:58 墨染一生阅读(180) 评论(0) 推荐(0)

学成在线案例

摘要：####项目介绍本项目是对html和css前阶段的综合项目 ![](https://img2020.cnblogs.com/blog/2572010/202110/2572010-20211009220509373-1528625561.png) 先测量页面版心，写个总类样式先看出页面宽度是12 阅读全文

posted @ 2021-10-09 23:22 墨染一生阅读(52) 评论(0) 推荐(0)

浮动消除

摘要：#思考题我们在之前浮动元素有一个标准的父元素，他们都有一个共同的特点，都是有高度的。但是，所有的父盒子都必须有高度吗？理想中状态，让子盒子撑开父亲，有多少孩子，父盒子就有多高但是点击查看代码 .box{ width: 800px; border: 1px solid brown; marg 阅读全文

posted @ 2021-10-08 22:52 墨染一生阅读(34) 评论(0) 推荐(0)

常见网络布局

摘要：####1.标准流例如京东 ####2. 浮动流 ####3.复杂的浮动流点击查看代码 <style> * { margin: 0; padding: 0; } .top { height: 50px; background-color: gray; } .banner { width: 980 阅读全文

posted @ 2021-10-07 22:39 墨染一生阅读(257) 评论(0) 推荐(0)

浮动

摘要：#### 1.浮动 ##### 1.1 什么是浮动 float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘及包含块或另一个浮动框的边缘。语法： **选择器{float:属性值;}** 属性值|描述 :--:|:--: none|元素不浮动（默认值） left|向左浮动| right|向右阅读全文

posted @ 2021-10-07 21:12 墨染一生阅读(54) 评论(0) 推荐(0)

墨染一生

公告

10 2021 档案