青海营销型网站建设,相册制作app,聊城做网站的公司信息,网页界面设计的意义Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。Bootstrap 提供了一些辅助类#xff0c;以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备#xff0c;实现内容对设备的显示和隐… Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。Bootstrap 提供了一些辅助类以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备实现内容对设备的显示和隐藏。row 行-md 桌面显示器-ms 平板显示器-xs 手机显示器1行有12列div class row div class col-md-12/div div class col-ms-12/divdiv class col-xs-12/div //表示一行中有12列/div!DOCTYPE html
html
head langenmeta charsetUTF-8title/titlemeta nameviewport contentwidthdevice-width, initial-scale1link relstylesheet hrefcss/bootstrap.min.css/script languageJavaScript srcjs/jquery-3.js/scriptstyle typetext/css*{top: 0px;padding: 0px;text-decoration: none;list-style-type: none;}.top-styl{height: 50px;border: 1px solid red;background-color: #000000;}.img-styl{width: 174px;height: 50px;background: url(imges/logo.png)no-repeat 0px 3px;background-size: contain;float: left;}.sousuo-styl{width: 187px;float: left;}.top-search-input{width: 150px;padding: 0 5px;height: 30px;border: 0;background: #363636;float: left;color: #ccc;}.top-search-submit{width: 30px;height: 30px;border: 0;background: green url(imges/zoom.gif)center center no-repeat;float: left;cursor: pointer; //光标指针}.dao-styll{float: left;font-size: 16px;width: 329px;margin-left: 33px;margin-top: 11px;}.dao-styll li{float: left;position: relative; //相对定位text-align: center; //居中padding: 0 7px;}.dao-styll li:hover{background-color: #999;}.dao-styll li a{color: #FFF;width: 100%;height: 34px;text-decoration: none; //取消下划线}.dz-styl{float: right;margin: -19px -9px 6px 21px;}.imgs-styl{padding: 11px 0px 0px 114px;float: right;margin: 0px -98px -3px 8px;}.green-styl{color: green;}.zc-styl{color: white;}a{text-decoration: none;}/style
/head
bodydiv classcontainer-fluid //fluid表示用 百分比div classrow //row 行div classtop-styl col-md-12 //col-md-12 每行桌面占12列div classrowdiv class col-md-offset-1 col-md-9 //col-md-offset-1 列偏移1列div classrowdiv classcol-md-3 col-xs-4div classimg-styl/div/divdiv classcol-md-3 div classsousuo-styl stylepadding-left: 7px; margin: 8px auto;input classtop-search-input value typetextinputclasstop-search-submit typesubmit value //div/divdiv classcol-md-4 hidden-xs stylepadding: 0pxul classdao-styllli classa href#风格/a/lili classa href#造型师/a/lili classa href#众分享/a/lili classa href#我的美丽衣橱/a/li/ul/divdiv classcol-md-2div classimgs-stylimg srcimges/sina.gif/divdiv classdz-stylspana href# classgreen-styl登录/anbsp;|nbsp;/spanspana href# classzc-styl注册/a/span/div/div/div/div/div/div/divdiv classrowdiv classvisible-mdh1当前为桌面显示/h1/div //visible默认占满整行 div classvisible-smh1当前为平面显示/h1/divdiv classvisible-xsh1当前为手机显示/h1/div/div/div
/body
/html 效果显示图
