div加css设计网页 第1篇
注意：SPRY框架和JS是扩展知识，尤其是JS。最后一个作业只要求做出CSS效果来，满分七十分，如果把JS效果能独立做出来，是140分
劝君莫惜金缕衣，劝君惜取少年时。 花开堪折直须折，莫待无花空折枝。电脑技术，重在普及，重在应用。珠峰电脑培训学校掀电脑技术普及风暴！！
北京珠峰培课是都可是免费试听或旁听的，您可以周六日来，我们全天都有CSS的课程。如果您立志从事网站设计或开发并以此为起点谋求更快、更好的发展，那您一定要精通CSS+DIV,您的CSS水平，决定了您的钱途和前途！单纯靠平面设计找工作或不懂CSS而从事网页制作，那您永远是个三流的网站开发或设计人员。精通CSS是适应现代IT飞速发展形势的不二选择。
先原理再实践，先走再跑，循序渐进，不然则是在浪费自己的时间。
标准流、盒子模型、浮动、定位：这4个是CSS核心，了解得越详细、越深入，你实际做起来就越轻松。很多人学习CSS很吃力，原因就在于没有把握住CSS的核心，学习没有章法，搞的自己焦头烂额。那你很有必要到这里来听一下这个讲座。 此课程通俗易懂，用大量的实例帮你快速认识CSS的魅力所在，让你快速的掌握CSS核心的东西，让你再学习CSS能达到事半功倍的效果。
主讲人：朱峰老师 七年网站开发经验。通过大量的实例生动具体的阐述CSS原理及其应用。
具体的例子有：CSS导航菜单，CSS二级菜单，CSS完成网页布局，用CSS制作圆角菜单，纯CSS的菜单特效，滑动门，九宫格，变宽布局等特效。
每次课程的的详尽情况，请来之前致电15010063597或62863298咨询
div加css设计网页 第2篇
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #D3D3D3;
.main {
width: 63%;
height: 700px;
margin: 60px auto;
.head {
width: 100%;
height: 50px;
border-bottom: 2px solid #999;
.menu {
float: left;
.self_intr {
width: 100%;
margin: 30px 0;
height: 650px;
float: left;
background-color: #EEEEEE;
hr {
width: 80%;
margin: 0 auto;
h2 {
width: 80%;
margin-left: 10%;
.img_text {
width: 80%;
margin-left: 10%;
.img_left {
float: left;
width: 350px;
height: 600px;
margin: 30px 20px;
.img_left img {
margin-bottom: 20px;
.aihao_li {
width: 250px;
height: 300px;
margin-top: 20px;
.aihao_li ul li {
height: 30px;
list-style: none;
color: blue;
.text_intr {
width: 500px;
height: 340px;
float: left;
margin-top: 30px;
table {
width: 80%;
background-color: #ddd;
height: 100px;
margin: 0 auto;
.t_right {
text-align: right;
tr td {
height: 25px;
line-height: 20px;
h3 {
margin-left: 40px;
.intr {
margin: 10px 40px;
line-height: 35px;
color: #666;
font-size: 13px;
.menu img {
float: left;
.h1 {
float: left;
font-size: 24px;
.head ul {
list-style: none;
float: left;
margin-left: 120px;
.head ul li {
float: left;
width: 120px;
text-align: center;
.active {
color: rgb(101, 197, 165);
ul a {
float: left;
由于格式问题，只展示了《首页》的代码，《超人栏目》《海王栏目》《留言栏目》就上截图了，需要的小伙伴关注公众号“IT黄大大”获取源码直接下载。
超人html代码
超人Css代码
海王html代码
海王Css代码
留言html代码
留言Css代码
注：可能里面的一些图片没有显示，想要完整包的同学们可以留言或关注公众号，这边有时间第一时间给你们发哦。
div加css设计网页 第3篇
在讲解SPRY框架时要求学生理解什么是CSS、JS框架，要求了解SPRY所能实现的网页特效。 对SPRY框架的JS部分不做讲解，对SPRY的CSS要求学生熟练掌握如何做出自定义的几种特效。 对学生说明为什么要选择SPRY来讲解：SPRY和DW无缝集成，不需要写任何的JS代码就可以图形化的设计特效，这是其它框架所不具备的。 在更高级的课程中（javascript网页编程课程中），我们会讲解功能更强大，更通用列流行的JQuery框架。
练习，有tab面板的综合网页练习 布置作业：用spry完成综合的网站首页功能
JS入门，JS语法，方法定义，基本的语句：条件，循环，用JS控制CSS 用JS做的下拉菜单
div加css设计网页 第4篇
之前我们通常是在预处理器里才可以使用变量，而现在 CSS 里也支持了变量的用法。通过自定义属性就可以在想要使用的地方引用它。
自定义属性也和普通属性一样具有级联性，申明在 :root 下的时候，在全文档范围内可用，而如果是在某个元素下申明自定义属性，则只能在它及它的子元素下才可以使用。
自定义属性必须通过 --x 的格式申明，比如：–theme-color: red; 使用自定义属性的时候，需要用 var 函数。比如：
上图这个是使用 CSS 自定义属性配合 JS 实现的动态调整元素的 box-shadow，具体可以看这个 codepen demo。
Retina 显示屏比普通的屏幕有着更高的分辨率，所以在移动端的 1px 边框就会看起来比较粗，为了美观通常需要把这个线条细化处理。这里有篇文章列举了 7 中方案可以参考一下：7种方法解决移动端Retina屏幕1px边框问题,而这里附上最后一种通过伪类和 transform 实现的相对完美的解决方案： 而这里附上最后一种通过伪类和 transform 实现的相对完美的解决方案： 只设置单条底部边框：
同时设置 4 条边框：
一、是什么
响应式网站设计（Responsive Web design）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整
描述响应式界面最著名的一句话就是“Content is like water”
大白话便是“如果将屏幕看作容器，那么内容就像水一样”
响应式网站常见特点：
二、实现方式
响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport
当视口在375px - 600px之间，设置特定字体大小18px
通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，比如我们为不同分辨率的屏幕，设置不同的背景图片
比如给小屏幕手机设置@2x图，为大屏幕手机设置@3x图，通过媒体查询就能很方便的实现
百分比
通过百分比单位 _ % _ 来实现响应式的效果
比如当浏览器的宽度或者高度发生变化时，通过百分比单位，可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果
height、width属性的百分比依托于父标签的宽高，但是其他盒子属性则不完全依赖父元素：
视口单位vw/vh
将视口宽度和视口高度（即layoutviewport）等分为 100 份。 vw : 1vw 为视口宽度的 1% vh : 1vh 为视口高度的 1% vmin : vw 和 vh 中的较小值 vmax : 选取 vw 和 vh 中的较大值 和rem相比较，视口单位不需要使用js对根元素进行设置，兼容性稍差，但是大部分设备都已经支持了，同样的无须再开发时进行单位换算，直接使用相关的插件postcss-px-to-viewport在输出的时候进行转换。
与百分比布局很相似，在以前文章提过与%的区别，这里就不再展开述说
可以看到每个属性都使用百分比，会照成布局的复杂度，所以不建议使用百分比来实现响应式
rem 是相对于根元素 html 的 font-size 来做计算，默认情况下浏览器字体大小为16px，此时1rem = 16px。通常在页面初始化时加载时通过对 设置来实现。一般我们将根元素html的font-size设置为宽度的1/10，不同设备的宽度不同，但是同样数值的rem比例与设备的宽度比例是一致的。
在实际项目中我们无须在开发中自己进行转换，可以使用pxtorem在输出的时候将px转换为rem。
可以利用前面提到的媒体查询，针对不同设备分辨率改变font-size的值，如下：
为了更准确监听设备可视窗口变化，我们可以在css之前插入script标签，内容如下：
无论设备可视窗口如何变化，始终设置rem为width的1/10，实现了百分比布局
除此之外，我们还可以利用主流UI框架，如：element ui、antd提供的栅格布局实现响应式
小结
响应式设计实现通常会从以下几方面思考：
三、总结
响应式布局优点可以看到：
缺点：
参考阅读：
针对同一个类型的 HTML 标签，不同的浏览器往往有不同的表现，所以在网站制作的时候，开发者通常都是需要将这些浏览器的默认样式清除，让网页在不同的浏览器上能够保持一致。
针对清除浏览器默认样式这件事，在很早之前 CSS 大师 Eric A. Meyer 就干过。它就是写一堆通用的样式用来重置浏览器默认样式，这些样式通常会放到一个命名为 文件中。比如大师的 [17] 是这么写的。
他的这份 据说是被使用最广泛的重设样式的方案了。