css作业
文章平均质量分 60
cindy_rain
快乐学习
展开
-
响应式布局
随着显示屏幕大小的变化,网页所显示的效果也不一样。如下: 当屏幕在980px以上时:当屏幕在980Px和560px之间时:响应式布局可以参考:媒体查询 代码奉上:<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=原创 2015-11-21 10:15:03 · 323 阅读 · 0 评论 -
两列固定,中间列宽度自适应
首先,我先举两个例子,一个是圣杯型布局,另外一个是双飞翼型。双飞翼型是某博主由圣杯型参考后自创的一个布局方式。1. 圣杯型布局 尝试之路考虑以下DOM结构:div id="page"> div id="hd">div> div id="bd"> div class="main">di原创 2015-11-20 22:07:29 · 527 阅读 · 0 评论 -
不使用border-radius实现圆角框
原文:基本的圆角框 实现原理: 纯CSS方式实现圆角框的原理在网络上已经有很多人详细解说了,下面这个示意图是我将其中的一个圆角进行放大后的效果。从上面效果图中我们可以看到其实这种圆角框是靠一个个容器堆砌而成的,每一个容器的宽度不同,这个宽度是由margin外边距来实现的,如:margin:0 5px;就是左右两侧的外边距5像素,从上到下有5条线,其外边距分别为5px,3px,2px,1px,依次转载 2015-11-20 20:49:07 · 4625 阅读 · 0 评论 -
左侧固定,右侧宽度自适应
这里用到两种方法实现实现一个两列布局,其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化 。每个例子我都用两幅图对比效果。黄色部分的宽度就是大框架的宽度,我们可以看到红色区域不发生改变,红色区域随着黄色区域宽度的改变而改变。 html部分<div class="box1"> <div class="divA">DIVA</div> <div class="divB">原创 2015-11-20 21:34:22 · 1836 阅读 · 0 评论