惠州网站建设 熊掌号,互联网公司排名情况,做试管的网站,页面设计设计风格1、响应式网页#xff1a; ①Responsive Web Page#xff1a;一个可以根据浏览设备的不同#xff0c;而自动更改布局、图片、文字效果的网页#xff1b; ②构成#xff1a;不能固定宽度#xff0c;必须流式布局#xff1b;文字和图片大小随容器大小而改变#xff1b;CS…1、响应式网页 ①Responsive Web Page一个可以根据浏览设备的不同而自动更改布局、图片、文字效果的网页 ②构成不能固定宽度必须流式布局文字和图片大小随容器大小而改变CSS3 Media Query2、响应式网页编写 ①必须声明viewport元标签 meta nameviewport contentwidthdevice-width,initial-scale1.0,user-scalableno/ * 避免用户左右滑动屏幕禁止浏览器初始时缩放显示 ②容器的宽度尽量不使用固定值px使用相对宽度%或auto ③文字尽量不使用绝对尺寸px使用相对尺寸em或rem ④图片要指定大小如 img{ max-width:100%;/*随容器缩小但最大不会超过图片原始大小——防止失真*/ } ⑤页面布局时不能固定采用流式布局如浮动inline-block ⑥灵活使用CSS3 Media Query技术——响应式网页必备元素3、CSS3 Media Query技术 ①Media指浏览网页的设备如screen、tv、projection、tty字符终端、print、braille、speech等 ②Query指自动获取当前浏览设备物理特性如色彩深度、orientation、width、height等 ③CSS媒体查询技术可以根据浏览设备的类型及特性执行不同的CSS代码 ④CSS3 Media Query两种用法 a、根据媒体查询结果执行不同的外部CSS文件 link mediascreen and (max-width:991px) and (min-width:768px) relstylesheet hrefcss/pad.css/ 不足当前设备不执行的CSS文件也会被浏览器加载每个CSS文件可能存在很多重复代码 b、在一个CSS片段中有选择的执行某些选择器 media screen and (min-width:768px) and (max-width:991px){ 选择器{属性名值} }4、BootStrap模板 ①html langzh-cn HTML标签的lang属性language用于指定当前网页的自然语言可取值zh-cn、en、en-us、ja等 作用为浏览器翻译功能指明原始语言为屏幕阅读软件指明应该使用的发音 ②meta http-equivX-UA-Compatible contentIEdege HTTP响应消息头部X-UA-Compatible Cross-UserAgent-CompatibleIE浏览器专用头部告诉新版本的IE兼容哪个版本的内核edge表示启用能够使用的最新的版本内核5、BootStrap全局CSS样式 ①按钮相关Class .btn——按钮基础样式 .btn-default——白底黑字按钮 .btn-danger——红色按钮 .btn-warning——黄色按钮 .btn-success——绿色按钮 .btn-info——浅蓝色按钮 .btn-primary——深蓝色按钮 .btn-lg——大号按钮 .btn-sm——中号按钮 .btn-xs——小号按钮 .btn-block——块级按钮 ②图片相关Class .img-circle——圆形图片 .img-rounded——圆角图片 .img-thumbnail——缩略图片 .img-responsive——响应式图片 ③文本相关Class .text-danger/warning/success/info/primary——五种文本颜色 .bg-danger/warning/success/info/primary——五种文本背景颜色 .text-uppercase——文本转换为大写形式 .text-lowercase——文本转换为小写形式 .text-capitalize——文本转换为首字母大写形式.text-left——文本左对齐 .text-center——文本居中对齐 .text-right——文本右对齐 .text-justify——文本两端调整对齐
