做网站卖什么软件,免费建设微网站制作,舆情分析研判报告,流程优化的七个步骤HTML部分
浏览器内核 web标准 vscode的一些插件推荐 标题标签
记住h1标题最大就行
段落和换行标签 br /不会有垂直间距 文本格式化标签 图片标签及路径 img src alt title width / 如果出现多个上一级…HTML部分
浏览器内核 web标准 vscode的一些插件推荐 标题标签
记住h1标题最大就行
段落和换行标签 br /不会有垂直间距 文本格式化标签 图片标签及路径 img src alt title width / 如果出现多个上一级可以这样写
img src ../../../ 超链接标签 内部链接需要注意所写的网页与你要跳转的网页的路径问题。
下载链接img src img.zip,或者是可执行文件.exe 锚点链接里面只能加ID用类选择器不行的 注释
单行注释 Ctrl/
多行注释 Ctrl shirt / 特殊字符 表格 合并单元格 无序列表 去掉里面的小圆点后面会用到
list-stylenone
有序列表 自定义列表 表单 input input type file /用来上传文件 在单选按钮input type radio name /,必须带有name否则可以多选 label
select下拉元素 textarea标签
注册页面代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title注册页面/title
/headbodyform actionxx.php name注册 methodposth4青春不常在抓紧谈恋爱/h4table width600pxtrtd性别/tdtdinput typeradio namesex idman checkedcheckedlabel formanimg src../images/man.jpgalt 男/labelinput typeradio namesex idwomanlabel forwomanimg src../images/women.jpgalt女/label/td/trtrtd生日/tdtdselect nameyear idoption value--请选择年--/optionoption value1999/optionoption value2000/optionoption value2000/optionoption value2001/option/selectselect namemonth idoption value--请选择月--/optionoption value1/optionoption value2/optionoption value3/optionoption value4/option/selectselect nameday idoption value--请选择日--/optionoption value1/optionoption value2/optionoption value3/optionoption value4/option/select/td/tr!-- 所在地区 --trtd所在地区/tdtdinput typetext value北京思密达/td/tr!-- 婚姻状况 --trtd婚姻状况 /tdtdinput typeradio namemerry checked未婚input typeradio namemerry已婚input typeradionamemerry离婚/td/tr!-- 学历 --trtd学历/tdtdinput typetext value小学/td/tr!-- 喜欢类型 --trtd喜欢的类型/tdtdinput typecheckbox妩媚的input typecheckbox可爱的input typecheckbox小鲜肉input typecheckbox老腊肉inputtypecheckbox都喜欢/td/trtrtd自我介绍/tdtd textarea nameinformation id cols30 rows4自我介绍/textarea/td/trtrtd/tdtdinput typesubmit value免费注册/td/trtrtd/tdtdinput typecheckbox checkedchecked我同意注册条款和会员加入标准/td/trtrtd/tdtda href#我是会员立即登录/a/td/trtrtd/tdtdh3我承诺/h3ulli年满18岁单身/lili抱着严谨的态度/lili真诚寻找另一半/li/ul/td/tr/table/form
/body/html 用来查阅知识菜鸟教程也可以的 CSS部分
css是层叠样式表Cascading Style Sheets的简称有时我们称为css样式表或级联样式表。css也是一种标记语言 css语法规范 选择器的分类 标签名称 {标签属性 属性值标签属性 属性值标签属性 属性值
} 作用将某一类标签全部选择出来比如所有的div标签。
优点可以快速为页面的同类型标签设置样式。
缺点不能设计差异化样式只能选择全部的当前标签。
类选择器 相同的属性写在一个类中不同的属性写在不同的类中id选择器 通配符选择器 font字体 让倾斜的文字不倾斜 font-style : normal 如果遇到 font: 12px/28px Microsoft YaHei
这个说明 12px是字体大小28px是行高 文本样式 css的引入方式 Emmet语法 例如 div{hello} 就会生成 divhello/div
我个人感觉这个没啥用 自动格式化代码 复合选择器
后代选择器 子选择器(亲儿子) 1 styleulli {color: blue;}/style
bodyulli1231/lili1231/lili1231/li/ul
/body
里面所有li都会变色
2styleuldiv {color: blue;}/stylebodyullidiv123/div/lili1231/lili1231/li/ul
/body
div不会变色因为div不是亲儿子
并集选择器 伪类选择器 不一定都是a标签需要添加伪类选择器的标签都可以
例如divhover就是当鼠标经过div时就会触发stylestylediv {width: 200px;height: 200px;background-color: pink;}div:hover {background-color: red;}/style
/headbodydiv/div 我是这样记得买了lv包后人HAHA大笑 元素类型 块元素 p标签里面放块级元素会多生成一个p标签 行内元素 行内块元素 img、input、td都是行内块元素转换 转换为块级元素displayblock
转换成行内元素 displayinline
转换成行内块 displayinline-block
元素垂直居中
如何让元素垂直居中设置行高与高度一致
line-height等于height就可以实现文字垂直居中
如果行高大于盒子高度文字偏下。若行高小于盒子高度文字偏上。
背景颜色
背景图片
背景平铺 图片位置 背景图片滚动 背景半透明 前面三个决定颜色最后一个决定透明
取到0就是全透明1就是不透明 CSS三大特性
CSS三大特性层叠性继承性优先级 层叠性 就近原则谁离结构近就选谁 继承性 优先级 注意权重没有进位 就算给父级指定样式加上important子元素权重继承的也是0 盒子模型 边框 border-style 边框的样式 solid实线边框 dashed虚线边框 dotted点线边框 边框会影响盒子大小 内边距padding 1在我们给盒子指定padding值之后会撑大盒子。
解决方案用width/height减去多出来的padding就保持盒子大小不变
2当我们没有给盒子指定width/height属性时此时的padding就不会撑开盒子大小 外边距margin 通过外边距让盒子水平居中 外边距margin合并 重点记住给父元素添加 overflowhidden
这样可以保证盒子大小不变
浮动的盒子不存在外边距合并 清除浏览器的内外边距 ps的一些基本操作 pink老师总结
1布局要用不同的盒子标签都是有语义的合理的地方用合理的标签。比如产品标题用h文字段落用p
2给每个盒子起类名可以更好地找到这个盒子也便于后期维修
3margin和padding在大多情况下可以混用两个各有优缺点根据实际情况选择 CSS3新增属性
圆角边框 border-radius长度
(通过测试发现radius和盒子的高height有关当长度到达高的一半就不再变化) 盒子阴影 文字阴影 浮动
网页的三种排列方式1、标准流 2、浮动 3、 定位 浮动
浮动除了不占位置外两个相邻元素之间没有空隙。
如果用行内块的话两个元素存在空隙消除不了 浮动注意事项 前面的标准流已经占了位置后面的元素浮动只会让后面的元素占浮动元素的位置 清除浮动
为什么要清除浮动呢
在一些情况比如商品栏这种不方便给高度但是子盒子浮动后不占有位置最后导致父盒子高度为0就会影响下面的标准流盒子。 额外标签法
清除浮动的方法有
1、额外便签法也称隔墙法是W3C推荐的做法
2、父级添加overflow属性
3、父级添加after伪元素
4、父级添加双伪元素
额外标签法
style.clear {clear: both;}
/style
div classboxdiv classdamao打毛/divdiv classermao二毛/divdiv classclear/div/div 父级添加overflow 父级添加after伪元素 父级添加双伪元素 常见的图片格式 ps切图方式 css样式顺序建议 定位 静态定位 相对定位 注意相对定位不脱标他原来的位置继续保留
见下图 绝对定位 子绝父相 固定定位
以浏览器为参照点 粘性定位了解 定位叠放 绝对定位居中 定位特性 元素的显示与隐藏
display /* 当鼠标经过大盒子里面的.top就显示 */.bigbox:hover .top {display: block;}
visibility overflow css高级
精灵图
为什么需要精灵图
为了有效的减少服务器接收和发送请求的次数提高网页的加载速度于是就出现了CSS精灵图
原理将网页中很多小的图片整合到一张大的图片之中这样向服务器请求一次就行 background:url() no-repeat x y;
或者单独拿出来 background-position: x y
ps用f8就可以查看所写区域的XY坐标 字体图标 字体图标网站 字体图标的使用 所谓的根目录就是你写的网页的目录其实不放也行不过在应用的时候需要改路径比较麻烦 将这些代码引入css里面 将你要用到的字体图标引入HTML中然后在css中给所用到的标签引入字体样式就完成了 CSS三角 三角的做法
让盒子的高度和宽度都变为0任意一个边框给大小和颜色其他transparent透明CSS用户界面样式
鼠标样式cursor 轮廓线outline
防止文本域拖动 img与文本的位置 溢出文字省略 margin负值运用 文字围绕图片浮动元素
在做文字在右图片在左的样式可以巧妙运用浮动浮动本身产生的起源就是围绕文字所以图片不会压住文字
行内块的巧妙运用 像这样的可以给外面盒子添加text-aligncenter,直接就可以居中
css三角巧妙运用 和之前的三角形差不多只不过这个需要设置两个边的长度需要另一个来压
.box {width: 0;height: 0;border-color: transparent red transparent transparent;border-style: solid;border-width: 30px 10px 0 0;}
HTML5新特性ie9
新增语义化标签 多媒体标签
使用video元素。尽量使用MP4格式谷歌还需要添加muted“muted”
video src controlscontrols/video新增input表单
必须添加form表单域 CSS3新特性ie9
属性选择器 结构伪类选择器
结构伪类选择器前面的标签是你要选择的标签不是他的父级 nth-child和nth-of-type基本用法差不多但是执行的顺序不同 伪元素选择器 CSS3盒子模型 CSS3图片模糊 CSS3过渡
谁做过渡就给谁加
如果要使用多个属性用逗号隔开
transition过渡属性 花费时间 运动曲线 何时开始 过渡属性 花费时间 运动曲线 何时开始 网站favicon图标
制作网站图标的三个步骤
1先选取你要用的图标可以是png,jpeg,jpg,gif
2登录http://www.bitbug.net将你所选取的图片转换成ico格式然后下载下来
3在HTMLhead/head标签内引入link relshortcut icon href图标的路径 typeimage/x-icon
TDK三大标签SEO优化了解 常见模块命名 logoSEO优化 网站上传服务器
http://free.3v.do这个网站现在需要付费10块
1、去可以注册网站账号的地方注册
2、一定要记住自己的主机名用户名。密码和域名
3、利用相关的ftp软件将自己的网站上传到远程服务器这个里面就要用到你的主机名用户、密码啥的
4、可以在浏览器上通过你的域名访问你的网站了
CSS3 2D转换
translate移动 rotate旋转
旋转中心点transform-origin 缩放scale
scale不会影响下面的盒子 transform注意事项 动画animation
动画分为两步先定义再调用
定义
keyframes 动画名 {0%{width:100px }100% {width:200px}}
里面的0%、100%可以用from和to来代替
然后在你需要用到的地方调用 透明度opacity 3D转换 translate3d 注意里面不能省略任意一个属性值没有就写0
transform:translate3d(0,0,100px)
translateZ一般都是跟px perspective透视 要想出现效果必须给父盒子添加perspective
rotate3d
rotateX totateY rotateZ
和我们的2d旋转差不多也可以用左手定则来想一下 3d呈现transform-style
注意这个和perspective一样都是写给父级元素
如果不加transform-stylepreserve-3d就不会呈现3d效果给父级 浏览器私有前缀 移动web开发
meta视口标签 物理像素比
我们PC端的1px不一定等于移动端的1px,这之间存在着物理像素比 以上数据来自https://material.io/devices/ 多倍图
由于存在着物理像素比当我们把PC的页面拿到移动端图片会被放大多倍导致模糊所以这儿要用到多倍图 background-size 单位如果写%而且只写一个那么另一个等比例缩放注意里面的百分比是相对父盒子来说
cover是完全把盒子覆盖住。不会留白但是图片可能显示不全
contain是把宽度或者高度任一一个弄到最大可能盒子会留白 移动端初始化css box-sizing 特殊样式 流式布局百分比布局 flex布局 flex-direction justify-content
flex-wrap
flex-wrap默认不换行如果子盒子宽度大于父盒子他就会缩小子盒子的宽度 align-items单行 align-content多行 flex-flow 背景色渐变带前缀 rem适配布局
rem 媒体查询 宽度最好从小到大写
响应式布局 Less less导入另一个less cssrem 安装完后打开设置搜cssrem往下滑看到root font size就可以设置1rem等于多少px了
响应式布局 //用媒体查询
media screen and (max-width:768px){//css代码}
Bootstrap
1.布局容器 2.栅各系统 3.响应式工具 vw和vh 获取他人字体图标 本地存储
