建设局网站项目负责人资质要求单页seo如何优化

当前位置： 首页 > news >正文

建设局网站项目负责人资质要求,单页seo如何优化,建工社官网,自己做网站卖机器设备作者#xff1a;学Java的冬瓜 博客主页#xff1a;☀冬瓜的主页#x1f319; 专栏#xff1a;【JavaEE】 分享: 且视他人如盏盏鬼火#xff0c;大胆地去走你的道路。——史铁生《病隙碎笔》 主要内容#xff1a;CSS引入html的三种方式#xff0c;CSS八大选择器#xff… 作者学Java的冬瓜 博客主页☀冬瓜的主页 专栏【JavaEE】 分享: 且视他人如盏盏鬼火大胆地去走你的道路。——史铁生《病隙碎笔》 主要内容CSS引入html的三种方式CSS八大选择器CSS属性元素(文字文本背景圆弧块级元素和行内元素的区别CSS盒子模型CSS弹性布局 文章目录 一、CSS引入方式1. 行内样式2. 内部样式3. 外部样式 二、CSS选择器1、 基础选择器1.1、标签1.2、类1.3、id1.4、通配符 2、复合选择器2.1、后代选择器2.2、子类选择器2.3、并集选择器2.4、伪类选择器 三、属性1、字体属性2、文本属性3、背景属性4、圆角矩形 四、元素的显示模式五、CSS盒子模型六、弹性布局 一、CSS引入方式

1. 行内样式 !DOCTYPE html htmlheadmeta charsetutf-8title行内样式/title/headbody!– 内联定义语法 标签 style样式名:样式值; 样式名:样式值…/标签–div stylewidth: 500px; height: 300px; background-color: blue;/div/body /html2. 内部样式 !DOCTYPE html htmlheadmeta charsetutf-8title内部样式/title/headbody!– 类选择器使用 –div classstudent/div!– 内部样式 –style/* 类选择器:/.student{width: 200px;height: 50px;background-color: blue;}/style/body /html3. 外部样式 CSS/my.css: #div1{width: 300px;height: 100px;background-color: blue;border: 1px solid red; }html: !DOCTYPE html htmlheadmeta charsetutf-8title外部样式/title!– 引入外部独立的CSS文件 –link relstylesheet hrefCSS/my.css//headbodydiv iddiv1/div/body /html二、CSS选择器 1、 基础选择器 优先级id选择器优先级 类选择器 标签选择器 注意在style中直接选中相应标签进行设置 1.1、标签 !– 标签选择器 –divi am a div/div !–使用方法–style / 样式 /div {width: 100%;height: 200px;background-color: aquamarine;}/style1.2、类 !– 类选择器 –div classbluei am a div/div !–使用方法–style / 样式 /.blue {color: blue;}/style 1.3、id !– id选择器 –div idredi am a div/div !–使用方法–style / 样式 /#red {color: red;background-color: blue;width: 200px;height: 150px;}/style1.4、通配符 注意使用通配符选择器选中所有标签 !– 通配符选择器 –divi am a div/divstyle {color: purple;}/style2、复合选择器 注意复合选择器可以是任意基础选择器的组合包括标签类id。 2.1、后代选择器 元素1 元素2 { 样式声明 }      注意1 元素二可以使用子元素(选中子元素)也可以使用孙子元素(选中孙子元素) 2后代选择器会选中父元素的指定后代元素(包括元素2及其后代元素)。 !– 后代选择器 –div !– 使用方式 –spani am the first span, 是div的后代div我是span的后代/div/spanpi am the first p/p/divstyle /* 样式 */div div {/选中div的孙子元素也是span的子元素div及其后代元素/color: aqua;}/style 2.2、子类选择器 元素1 元素2 { 样式声明 } 注意1 元素二只能使用子元素(选中子元素) 2 子类选择器会选中指定子元素及其后代。 !– 子类选择器 –divspani am the first span, 是div的后代div我是span的后代/div/spanpi am the first p/p/divstylediv span {/这里选中了div的子元素span及其后代元素/color: aqua;}/style2.3、并集选择器 元素1, 元素2 { 样式声明 } 注意表示通知选中元素1和元素2 !– 并集选择器 –divspani am the first span, 是div的后代div idone我是span的后代/div/spanpi am the first p/p/divstyle#one, p {color: aqua;}/style2.4、伪类选择器 注意这是属于复合选择器的特殊用法。 a:link 选择未被访问过的链接 a:visited 选择已经被访问过的链接 a:hover 选择鼠标指针悬停上的链接 a:active 选择活动链接(鼠标按下了但是未弹起)!– 伪类选择器 –div classonei am a div/divspani am a span/spanstyle.one:hover { /设置鼠标悬停颜色/color: orange;}span:active { /设置鼠标按下未放开时颜色/color: red;}/style三、属性 1、字体属性 设置字体类型font-family    黑体、宋体等 设置字体大小font-size       可以用px也可以用large、medium等 设置字体粗细font-weight    可以使用数字(范围1~1000)也可以使用单词 设置文字样式font-style     italic设置倾斜normal设置恢复 !DOCTYPE html htmlheadmeta charsetutf-8title外部样式/title!– 引入外部独立的CSS文件 –link relstylesheet typetext/css hrefCSS/my.css//headbodydiv iddiv1i am a div Lorem ipsum dolor sit amet consectetur adipisicing elit. Error tenetur nesciunt esse possimus perferendis! Dolor deleniti a libero obcaecati, perferendis quia nobis iste est doloribus illo, dolore quibusdam, eaque quaerat! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Labore fugit velit eos animi incidunt qui esse? Delectus quam laboriosam, nam saepe perspiciatis, natus vel enim velit incidunt eum cupiditate nisi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt corrupti totam vitae. Molestias numquam dicta harum at explicabo. Fugit ullam perferendis et tempora. Velit officiis repellat explicabo fuga quia est. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui maiores beatae ipsum! Accusantium, reprehenderit totam temporibus sapiente placeat obcaecati, quas aliquid illo, doloribus maiores consectetur possimus asperiores? Dolorum, impedit consectetur! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui vero fuga odio quas saepe quisquam eius mollitia unde similique incidunt quis voluptatibus dolore vitae ad, sequi maiores tempore nam consectetur?/divstylediv {/* 1.字体属性部分 // 设置字体类型 /font-family: 宋体;/ 设置字体大小 /font-size: 20px;/ 设置字体粗细 /font-weight: 20;/ 设置字体样式:斜体 /font-style: italic; }/style/body /html结果展示
   2、文本属性 设置文本颜色color    RGB(红绿蓝) 可以使用这三种方式1 rgb(255,255,255)   2 #ff0000(红)  3 #000(黑) 4 blue… 设置文本对齐text-align     left、right、center 设置文本装饰text-decoration     underline 下划线(常用)none 去掉装饰可以给a标签去掉下划线overline 上划线(不常用)line-through(不常用) 设置文本缩进text-indent     2em是相对的量1em是一个文字尺寸大小。 设置行高line-height    行高文字高度行间距 !DOCTYPE html htmlheadmeta charsetutf-8title外部样式/title!– 引入外部独立的CSS文件 –link relstylesheet typetext/css hrefCSS/my.css//headbodydiv iddiv1i am a div Lorem ipsum dolor sit amet consectetur adipisicing elit. Error tenetur nesciunt esse possimus perferendis! Dolor deleniti a libero obcaecati, perferendis quia nobis iste est doloribus illo, dolore quibusdam, eaque quaerat! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Labore fugit velit eos animi incidunt qui esse? Delectus quam laboriosam, nam saepe perspiciatis, natus vel enim velit incidunt eum cupiditate nisi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt corrupti totam vitae. Molestias numquam dicta harum at explicabo. Fugit ullam perferendis et tempora. Velit officiis repellat explicabo fuga quia est. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui maiores beatae ipsum! Accusantium, reprehenderit totam temporibus sapiente placeat obcaecati, quas aliquid illo, doloribus maiores consectetur possimus asperiores? Dolorum, impedit consectetur! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui vero fuga odio quas saepe quisquam eius mollitia unde similique incidunt quis voluptatibus dolore vitae ad, sequi maiores tempore nam consectetur?/divstylediv {/ 1.字体属性部分 // 设置字体类型 /font-family: 宋体;/ 设置字体大小 /font-size: 20px;/ 设置字体粗细 /font-weight: 20;/ 设置字体样式:斜体 /font-style: italic; / 2.文本属性部分 // 设置文本颜色 /color: #000;/ 设置文本对齐 /text-align: left;/ 设置文本装饰 /text-decoration: none;/ 设置文本缩进 /text-indent: 2em;/ 设置行高 /line-height: 50px;}/style/body /html 结果展示
   3、背景属性 设置背景颜色background-color 设置背景图片background-image: url(路径)    此处路径不需要加引号 设置背景图片的大小background-size    后跟宽度和高度设置图片尺寸contain表示图片在元素范围内变大图片weight或height大的达到背景大小cover则放大图片盖满元素范围图片weight或height小的达到背景大小 设置背景尺寸height 和 width    1数字px 2数字% 设置背景平铺background-repeat repeat: 平铺 no-repeat: 不平铺 repeat-x: 水平平铺 repeat-y: 垂直平铺 设置背景位置 background-position    后跟坐标x,y以左上角为远点以水平线为x竖直线为y。 !DOCTYPE html htmlheadmeta charsetutf-8title外部样式/title!– 引入外部独立的CSS文件 –link relstylesheet typetext/css hrefCSS/my.css//headbodydiv iddiv1i am a div Lorem ipsum dolor sit amet consectetur adipisicing elit. Error tenetur nesciunt esse possimus perferendis! Dolor deleniti a libero obcaecati, perferendis quia nobis iste est doloribus illo, dolore quibusdam, eaque quaerat! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Labore fugit velit eos animi incidunt qui esse? Delectus quam laboriosam, nam saepe perspiciatis, natus vel enim velit incidunt eum cupiditate nisi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt corrupti totam vitae. Molestias numquam dicta harum at explicabo. Fugit ullam perferendis et tempora. Velit officiis repellat explicabo fuga quia est. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui maiores beatae ipsum! Accusantium, reprehenderit totam temporibus sapiente placeat obcaecati, quas aliquid illo, doloribus maiores consectetur possimus asperiores? Dolorum, impedit consectetur! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui vero fuga odio quas saepe quisquam eius mollitia unde similique incidunt quis voluptatibus dolore vitae ad, sequi maiores tempore nam consectetur?/divstylediv {/ 1.字体属性部分 // 设置字体类型 /font-family: 宋体;/ 设置字体大小 /font-size: 20px;/ 设置字体粗细 /font-weight: 20;/ 设置字体样式:斜体 /font-style: italic; / 2.文本属性部分 // 设置文本颜色 /color: #000;/ 设置文本对齐 /text-align: left;/ 设置文本装饰 /text-decoration: none;/ 设置文本缩进 /text-indent: 2em;/ 设置行高 /line-height: 50px;/ 3.背景属性部分 // 设置背景颜色 /background-color: #0f0;/ 设置背景图片 /background-image: url(image/女.jpg);/ 设置背景图片的大小 /background-size: contain;/ 设置背景尺寸 /height: 500px;width: 100%;/ 设置背景平铺 /background-repeat: repeat;/ 设置背景位置 */background-position: center center;}/style/body /html 结果展示
   4、圆角矩形 设置内切圆半径border-radios    lengthlength为内切圆半径length越大弧度越强烈。 div四角变成圆弧 length小一点 div classoneI am a div/div style.one {width: 200px;height: 100px;background-color: aqua;color: #fff;text-align: center; /先水平居中然后用line-height垂直居中/line-height: 100px;border-radius: 5px; /设置内切圆半径长度/} /stylediv变成水平胶囊状 length是背景的高度height的一半 只需要修改上面的第12行代码为下面 border-radius: 50px; /设置内切圆半径长度/生成div圆形背景heigth和width一样大length为他俩的一半 div classoneI am a div/div style.one {width: 100px;height: 100px;background-color: aqua;color: #fff;text-align: center; /先水平居中然后用line-height垂直居中/line-height: 100px;border-radius: 50px; /*设置内切圆半径长度也可用em */} /style四、元素的显示模式 显示模式重点的有块级元素和行内元素 块级元素和行内元素的区别 1 块级元素会独占一行行内元素不会独占一行 2 块级元素高度、宽度、内外边距都是可以设置的行内元素高度、宽度\行高无效内边距有效外边距有时有效有时无效。 3 块级元素默认宽度是和父元素一样宽行内元素宽度默认和里面的内容一样宽。 五、CSS盒子模型 设置元素边框border    设置了四个方向可以分为border-topborder-rightborder-bottomboder-left四个标签设置。 边框粗细数字px边框颜色rgb#六位十六进制#三位十六进制边框风格solid(实线) 注意边框默认情况下会撑大盒子使用box-sizeborder-box那么边框是向内延展不会撑大盒子。 防止边框撑大盒子box-sizeborder-box 设置内边距padding    元素和该元素内容之间的距离 设置外边距margin    元素和元素之间的距离 注意margin的特殊用法把margin-left和margin-right设置成auto(让浏览器自动调节)垂直方向无效 div classoneI am a div/div style.one {width: 200px;height: 100px;background-color: aqua;color: #fff;text-align: center; /先水平居中然后用line-height垂直居中(垂直居中的值和背景的height一样大)/line-height: 100px;border-radius: 2em; /设置内切圆半径长度/border: 8px #000 solid;box-sizing: border-box;padding: 10px 20px 30px 40px;margin: 20px;} /style六、弹性布局 注意弹性布局用于解决页面水平方向排列的问题。 开启弹性布局的方法在父元素的设置样式中添加display:flex代表在父元素上面的子元素变成了弹性的元素可以设置尺寸和边距。 开启弹性布局后可以设置 未指定justify-content时 默认按照从左到右的方向布局。 指定 justify-content:设置水平方向的排列 end弹性元素靠右排列flex-start靠左排列center 居中space-around空白环绕弹性元素space-between弹性元素环绕空白 align-items:设置元素垂直方向的排列 end弹性元素靠下排列flex-start靠上排列center垂直方向居中 另外两个对应类似 理解行内块元素可以解决行内元素尺寸高度无效的问题但是行内元素和行内块元素都会把源码中span之间的这个换行当作一个空格对页面布局产生影响。因此使用弹性布局是比较理想的做法。 !–弹性布局–divspan1/span !–注意行内元素和行内块元素都会把源码中span之间的这个换行当作一个空格对页面布局产生影响–span2/spanspan3/spanspan4/spanspan5/spanspan6/span/divstylediv {width: 100%;height: 150px;background-color: red;/* 开启弹性布局此时在弹性容器里的元素不再是块级元素,而是成了弹性元素此时就可以设置尺寸和边距了。在要设置水平排列的元素的父元素设置flex /display: flex;/ justify-content:设置水平方向的排列弹性元素靠右排列:end 靠左排列:flex-start 居中:center 空白环绕弹性元素space-around 弹性元素环绕空白space-between/justify-content: space-around;/ align-items:设置元素垂直方向的排列/align-items: center;}divspan {width: 100px; / 如果不使用弹性布局设置宽度和高度无用 */height: 100px;background-color: aqua;}/style弹性布局以上三个操作display:flex     justify-content     align-items:都是在父元素的样式中添加的。