大家都明白，搞Web设计，其实关键就是得会用CSS布局，这样才能做出好看好用的网站。既能抓住用户眼球，又能让他们玩得痛快！那今天我就给大家讲些小技巧，教你们怎样轻松搞定好看又实用的网站哈~
选择合适的CSS框架
搞网页设计，首先要挑个好用的CSS网页布局框架。如果你想建个响应式网站，那Bootstrap就很棒它有强悍的网格系统和超多的样式选择，让你快速打造炫酷的布局和设计元素！
创建高效的网格系统
记住，网格系统可以让你的网站更整洁！而Bootstrap这个牛逼的CSS工具就靠.container、.row和.col这几个分类轻松搞定了它，真是超级便利！
Bootstrap Example <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">Hello World!
Resize the browser window to see the effect.
实现响应式设计
响应式设计就让你不管手机还是电脑，看网页都顺眼。咋实现？“媒体查询”这招就能搞定，它让你的网页自动调整布局和元素显示方式。比如想隐藏元素或根据屏幕大小调整位置、大小啥的，都没问题！
增强网站的视觉效果
.container {
margin: 0 auto;
max-width: 960px;
padding-left: 15px;
padding-right: 15px;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.col {
float: left;
padding-left: 15px;
padding-right: 15px;
}
.col-1 {
width: 8.33333%;
}
.col-2 {
width: 16.66667%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33333%;
}
.col-5 {
width: 41.66667%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33333%;
}
.col-8 {
width: 66.66667%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33333%;
}
.col-11 {
width: 91.66667%;
}
.col-12 {
width: 100%;
}
想让你的网站火起来？首先得把页面弄得漂漂亮亮的，加点艳丽的色彩，搞些动态的元素，再放上几个好看的渐变色图，绝对能让你的网站焕然一新！同时别忘了，学习下使用CSS精灵、压缩文件和缓存静态资源，会让你的网站运转如飞！
优化网站的易用性
一个好用的网站那才叫舒服！首先，网页导览必须一目了然，方便你轻松找到想要的信息。而且，网速可得快点儿，别让咱们读者等烦
总结与展望
搞网页布局，咱们就找些喜欢的框架，在上面搭网格系统，加点儿动态元素，让页面看着有活力，再给那些小白设计者一点使用便利。只要做到这几点，我们就能做成不但好看还好用的网站！希望这篇笔记能给你们在做网站时带来点儿新想法~
/* 在768px宽度以下屏幕上隐藏.slide类 */
@media only screen and (max-width: 767px) {
.slide {
display: none;
}
}
/* 在768px宽度以下屏幕上将.container-fluid类更改为.container类 */
@media only screen and (max-width: 767px) {
.container-fluid {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
}
/* 在992px宽度以下屏幕上将.col-md-4类更改为.col-xs-6类 */
@media only screen and (max-width: 991px) {
.col-md-4 {
width: 33.33333%;
}
}
@media only screen and (max-width: 767px) {
.col-xs-6 {
width: 50%;
}
}
/* 在小屏幕上使图片缩小 */
@media only screen and (max-width: 767px) {
img {
max-width: 100%;
}
}
提问与互动
快来评论区秀出你们的绝活呗！大家相互借鉴，进步更快。喜欢的话给个赞让更多设计师看到呗~
评论0