赤峰专业网站建设,百川互联,教育培训机构加盟十大排名,蓬莱做网站联系电话通过这次的《小巨蛋项目》网站的实战中#xff0c;最主要的还是代码的书写规范吧#xff0c;可能在这次的网站的实战中代码不是写的很好#xff0c;没有好好的去规划规划再做#xff0c;导致了给人的感觉就是有点乱的感觉#xff0c;所以要求以后的项目中书写代码要更加的… 通过这次的《小巨蛋项目》网站的实战中最主要的还是代码的书写规范吧可能在这次的网站的实战中代码不是写的很好没有好好的去规划规划再做导致了给人的感觉就是有点乱的感觉所以要求以后的项目中书写代码要更加的好点。要学会在制作之前要规划好在制作的过程中才会少些功夫才会事半功倍。所以事先先规划好还是挺重要的。接下来就是来说说一些学到的小知识点吧。 要制作网站前浏览器给的一些默认的样式还是要去除下的还有一些禁止事情比如禁止别人对你网站复制文字。 以下通过老师同学们知道的一些清除默认样式的代码 比如我是创建一个css文件reset.css。把以下放在reset.css里面在链接link relstylesheet typetext/css hrefcss/reset.css/到html页面就可以调用了方便。 body,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,select,textarea,button,th,td,menu{margin:0;padding:0;}
ul,dl,ol{list-style:none;}
img,fieldset,input[typesubmit]{border:0 none;}
em{font-style:normal;}
strong{font-weight:normal;}
table{border-collapse:collapse;border-spacing:0;}
button,input[typebutton]{cursor:pointer;border:0 none;}
a,button,input,img{-webkit-touch-callout:none;}
img{pointer-events:none;/*禁止图片的点击事件例如长按保存图片*/}
input,select,textarea{outline:none;}
a{text-decoration:none;}
.fl{ float: left}
.fr{ float: right}
.clear{clear:both;}
html,body{
/*禁止用户选择元素*/
-moz-user-select:none;-webkit-user-select: none;
-ms-user-select: none;-khtml-user-select:none; /*禁止元素点击出现半透明黑色背景*/-webkit-tap-highlight-color:rgba(0, 0, 0, 0); }
html {height: 100%;width: 100%;font-family: Heiti SC, Microsoft YaHei;outline: 0;-webkit-text-size-adjust:none;}
body {height: 100%;margin: 0;position: relative;} 在做项目中发现做一个网站难免不了有一些同样的代码做的页面多了同样的代码只多不减的所以可以自己创建一个公共样式以下也是通过小组、同学和自己的总结学到的一个小技巧吧 /*公共样式 开始*/
body {font-family: 微软雅黑;font-size: 12px;
}
/*文字效果*/
.text-align{text-align: center;
}
/*浮动用的*/
.fl {float: left;
}
.fr {float: right;
}
.clear {clear: both;
}/*容器*/
.container {width: 1000px; /*可改动*/margin: 0 auto;}
.box{width: 1000px;/*可改动*/margin: 0 auto;
}
.button { cursor: pointer; }/*公共样式 结束*/ 还有一些代码的规范吧使总体的代码看起来舒服点以下就是通过这次总结的几个代码书写规范 /*使用规范*/1、命名必须用英文,太长可以以首字母缩写,缩写的链接用横杠-,子类的话用child或者son,后面接着01,02,03...这样来命名.2、缩进用统一使用tab键,不能用空格3、将左花括号与选择器放在同一行。4、左花括号与选择器间添加以空格。5、冒号与属性值之间添加已空格。6、逗号和符号之后使用一个空格。7、每个属性与值结尾都要使用符号。8、只有属性值包含空格时才使用引号。9、右花括号放在新的一行。 下面是通过transition过度实现的导航条鼠标移上就有动画效果如下 兼容现在主流的浏览器 集团简介 株洲小巨蛋总体规划展贸中心区位介绍配送中心项目简介 株洲小巨蛋总体规划展贸中心区位介绍配送中心新闻更新 株洲小巨蛋总体规划展贸中心区位介绍配送中心 代码如下: !DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyleul{list-style: none;}.nav a{text-decoration: none;color: white;}.nav li{width: 130px;height: 50px;line-height: 50px;float: left;margin-left: 5px;border-radius: 10px;background: #ccc;text-align: center;transition: all 1s ease-in;overflow: hidden;}.nav li:hover{height: 269px; /*一个简单好看的过渡效果主要还是通过这绿色的三行代码实现的*/}.nav-child li{width: 150px;height: 43px;line-height: 43px;text-align: center;background: #dfdfdf;margin-left: -50px;border-bottom:1px solid #c4c4c4;}.nav-child li:hover{background: #d0d1d2;}.nav-child li a{color: #535353;}
/style
/head
bodyul classnavlia href#集团简介/aul classnav-childlia href#株洲小巨蛋/a/lilia href#总体规划/a/lilia href#展贸中心/a/lilia href#区位介绍/a/lilia href#配送中心/a/li/ul/lilia href#项目简介/aul classnav-childlia href#株洲小巨蛋/a/lilia href#总体规划/a/lilia href#展贸中心/a/lilia href#区位介绍/a/lilia href#配送中心/a/li/ul/lilia href#新闻更新/aul classnav-childlia href#株洲小巨蛋/a/lilia href#总体规划/a/lilia href#展贸中心/a/lilia href#区位介绍/a/lilia href#配送中心/a/li/ul/li/ul
/body
/html 转载于:https://www.cnblogs.com/dadayang/p/5797612.html
