做网站图片分辨率多少360网站页面的工具栏怎么做

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

做网站图片分辨率多少,360网站页面的工具栏怎么做,4399网站开发,网站生成系统源码CSS CSS概述: CSS是Cascading Style Sheets#xff08;级联样式表#xff09;,是一种样式表语言,用于控制网页布局,外观(比如背景图片,图片高度,文本颜色,文本字体,高级定位等等) 可将页面的内容与样式分离开,样式放于单独的.css文件或者HTML某处 CSS是网页样式,HTML是网页…CSS CSS概述: CSS是Cascading Style Sheets级联样式表,是一种样式表语言,用于控制网页布局,外观(比如背景图片,图片高度,文本颜色,文本字体,高级定位等等) 可将页面的内容与样式分离开,样式放于单独的.css文件或者HTML某处 CSS是网页样式,HTML是网页内容 基本语法-行内样式表 行内样式表 , 又有人称内联样式、行间样式、内嵌样式。是通过标签的 style 属性来设置元素的样式其基本语法格式如下 标签名 style 属性 1: 属性值 1; 属性 2: 属性值 2; 属性 3: 属性值 3; 内容 / 标签名 基本语法-内嵌样式表 内嵌式是将 CSS 代码集中写在 HTML 文档的 head 头部标签中并且用 style 标签定义 !DOCTYPE html htmlheadmeta charsetutf-8 /title/title.style/* css是样式表语言将内容与样式分离开 // 类选择器 /.p1{color: aquamarine;}!– 标签选择器 –a{color: aqua;}/ id选择器 /#aid{color: blueviolet;}/ 通配选择器 /{color: blue;}/* //style/headbody!– 导入外部样式表 –link hrefcss/wai.css/ !– 行内样式表优先级最高 –a stylecolor: aliceblue; idaid classp1/a/body /html基本语法-外部样式表 外部样式表是将所有的样式放在一个或多个以 .CSS 为扩展名的外部样式表文件中通 过 link 标签将外部样式表文件链接到 HTML 文档中 文本背景 直接看代码: !DOCTYPE html htmlheadmeta charsetutf-8title/titlestyle.p1{color: aliceblue;font-size: 10px; / px像素单位*/font-family: 楷体;font-weight: 200;/加粗/text-align: center;/水平文字对齐/font-style: initial;/字体 例如斜体//* text-decoration: underline; 修饰文本添加下滑线 line-height: 50px; 行高letter-spacing: 20px; 字符间距word-spacing: 20px; 单词间距text-indent: 2em; em当前文本中一个字符的大小 缩进量2em// background-repeat: repeat; /background-color: aqua;background-size: 250px;/ background-position-x: 250px; /background-image: url(img/img/grape.jpg);}a{text-decoration: none;}a:hover{text-decoration: underline;color: #}/style/headbodyp classp1/p/body /html CSS列表属性 CSS 列表属性可以放置、改变列表项标志或者将图像作为列表项标志  CSS伪类 css伪类专门用来表示标签的一种特殊状态,当我们需要为这些特殊状态的标签设置样式时,就可以使用伪类 !DOCTYPE html htmlheadmeta charsetutf-8title/title style/ 鼠标移入改变 /a:hover{color: red;}/ 点击改变 /a:active{color: aqua;}/ 向拥有键盘输入焦点的标签添加样式 /.btn:focus{color: red;}.te{background-color: blue;color: aqua;}/style/headbodya href 百度/ainput typetext classte/br /input typebutton/ value保存 classbtn/body /html 透明 定义透明效果的属性是 opacity 。 opacity 属性设置标签的不透明级别 值为 1 。 规定不透明度从 0.0 完全透明到 1.0 完全不透明 块级标签/行级标签/行级块标签 Display !DOCTYPE html htmlheadmeta charsetutf-8title/title/headbody!– 块级标签 p h1-h6 div 特点:自动占一行,可以放置任何标签,可以设置宽高–!– 行级标签a b s font 特点是设置宽高无效,不会自动占一行作用:对网页中的文字进行选中修饰–span stylecolor: blue; height: 60cm; width: 20cm; display: none;hello/span!– div span都是纯净版标签–div stylecolor: aqua; height: 200px; width: 600px; display: inline; div/div!– 行级块标签,不占一行又可以设置宽高 input image–!– 通过display样式可以修改标签的类型可选值block 设置标签为块标签inline 设置标签为行级标签inline-block 设置标签为行级块标签none 隐藏标签标签将在页面中完全消失–/body /html div是纯净的块级标签,span是纯净的行级标签       纯净没有任何附加功能 盒子模型 盒子模型          css中每一个标签都像一个盒子,网页布局本质就是摆放盒子                    每一个又分为了四个区域          内容区:放内容的区域          内边距:内容区到边框的距离          边框:标签的最外层          外边距:一个标签距离另一个标签的距离 !DOCTYPE html htmlheadmeta charsetutf-8title/titlestyle.box{background-color: red;width: 300px;height: 20px;/ 设置内边距 /padding-top: 5px;padding-bottom: 5px;padding-left: 15px;padding-right: 15px;}.sz{padding-top: 15px;padding-bottom: 15px;padding-left: 15px;padding-right: 15px;background-color: aqua;}/style/headbody!– 盒子模型每一个标签都像一个盒子,网页布局本质就是摆放盒子每一个又分为了四个区域内容区:放内容的区域内边距:内容区到边框的距离边框:标签的最外层外边距:一个标签距离另一个标签的距离–div classbox盒子模型/divdiv classsz stylewidth: 300px;height: 70px; display: block;img srcimg/wemeet image_20240602143005399.png //div/body /html 盒子模型-内容区-content 盒子模型-内边距-padding 盒子模型-边框-boeder !DOCTYPE html htmlheadmeta charsetutf-8title/titlestyle.text{border-color: red;border-radius: 15px;border: 2px red solid;padding: 15px;}.text:active{color: blueviolet;}.text:hover{color: aqua;}.p11:hover{color: blue;}/style/headbodya href classp11百度/ainput typetext classtext//body /html 盒子模型-外边距-margin: !DOCTYPE html htmlheadmeta charsetutf-8title/titlestyle/ 清除浏览器默认格式 // *{padding: 0px;margin: 0px;} */.z1{border: 60px;margin: 10px auto;padding-left: 600px;color: red;}/style/headbodydiv classz1盒子模型/divdiv classz1 stylewidth: 300px;height: 70px; display: block;img srcimg/wemeet image_20240602143005399.png //div/body /html 清除浏览器的默认样式: 浏览器为了在页面中没有样式时也可以有一个比较好的显示效果所以为很多的标签都设置了一些默认的margin 和 padding 而它的这些默认样式正常情况下我们是不需要使用的。 所以我们往往在编写样式之前需要将浏览器中的默认的 margin 和 padding 统统的去掉。 代码: { margin: 0; padding: 0; } 文档流 文档流指的是文档中的标签在排列时所占用的位置,           将窗体自上而下分成一行行 并在每行中按从左至右的顺序排放标签即为文档流 浮动 当一个标签浮动后,其原本下方的标签会上移 浮动会使标签完全脱离文档流,也就是不再在文档流中占用位置,这时不会再影响父标签的高度,也就是浮动标签 不会撑开父标签 清除浮动 clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不发生变化。 可选值 left 忽略左侧浮动 right 忽略右侧浮动 both 忽略全部浮动 !DOCTYPE html htmlheadmeta charsetutf-8title/titlestyle.nac{background-color: aqua;float: left;padding: 10px 20px;}.nax_box{/ 大小不够就效果错误 */width: 600px;margin: 10px auto;}/style/headbody!– 浮动会使标签脱离原来的文档流(二维平面) ,悬浮起来float:left浮动后不占用原来的二维空间,会影响后续布局–div classnax_boxdiv classnac新闻首页/divdiv classnac新闻联播/divdiv classnac娱乐至死/divdiv classnac加沙新闻/divdiv styleclear: left;/div !– 清除浮动 –/divdivassd/div/body /html 运行结果: CSS定位(position) 定位的基本思想很简单它允许你定义的标签相对于其正常位置或者相对于父标签、另一个标签甚至浏览器窗口本身而出现的位置 相对定位和绝对定位 绝对定位的特点 1.开启绝对定位会使标签脱离文档流 2.开启绝对定位以后如果不设置偏移量则标签的位置不会发生变化 3.绝对定位是相对于离他最近的开启了定位的祖先标签进行定位一般情况开启了子标签 的绝对定位都会同时开启父标签的相对定位 如果所有的祖先标签都没有开启定位则会相对于浏览器窗口进行定位