All items for 8月, 2017

CSS：i 与i 标签之间有间隙

8月 17, 2017

分类:Web

问题：需要两个i标签并排显示，中间无间隙，但是在margin:0;padding:0设置好了的情况下，仍然有间隙

HTML：

<i class="first"></i>
<i class="second"></i>

原因分析：把i (或者span之类的) 写在不同行就会出现间隔，

解决方法：应把两个i写在同一行

HTML：

<i class="first"></i><i class="second"></i>

i_无间隔

参考：http://blog.csdn.net/clarkt/article/details/46363909

CSS：li标签实现对称效果

8月 16, 2017

分类:Web

布局：ul中4个li标签，以中间为轴对称

分析：浮动，50%，box-sizing，padding

注意：要实现分块区域对称，li不能加margin,会被挤下来，应加上padding后设置a元素背景白色，即与大背景分离

css 对称分布效果

CSS:

 .nav_two li{float:left;
    width:50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    --box-sizing: border-box;
    box-sizing: border-box;opadding:8px;}

.nav_two li a{display:block;
    background:#fff;
    height:65px;
    width:100%;
    -webkit-box-shadow: -1px 1px 1px rgba(0,0,0,0.3);}

HTML5+CSS3：简单网页结构与CSS公共样式模板

8月 15, 2017

分类:Web

初学者常用的HTML结构与CSS公共样式模板

HTML模板：index.html

只添加了CSS文件链接与基本网页框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
    <meta content="telephone=0" name="format-detection"/>
    <link rel="stylesheet" type="text/css" href="CSS/common.css"/>
    <link rel="stylesheet" type="text/css" href="CSS/main.css"/>
    <title>标题</title>
</head>
<body>
<!--头部-->

<header></header>


<!--主体-->

<section></section>


<!--尾部-->

<footer></footer>


</body>
</html>

CSS Common模板：Common.css

@charset "utf-8";

html,body,header,section,footer,ul,li,
a,p,span,img,h3{margin:0;padding:0;}

a{ text-decoration: none;}

img{border:0;}

ul{list-style:none;}

body{min-width:340px;
margin:0 auto;
font:normal 12px/1.5 
Microsoft YaHei,
Helvetica,
Arial,
sans-serif;}

注意点：CSS: 为什么不建议使用*{padding:0;margin:0;}进行reset？

CSS: 表格table样式

8月 15, 2017

分类:Web

效果：

表格table

HTML:

<section>
    <table>
        <tr>
            <th>标题一</th>
            <th>标题二</th>
            <th>标题三</th>
        </tr>

        <tr>
            <td>第一行1</td>
            <td>第一行2</td>
            <td>第一行3</td>
        </tr>

        <tr>
            <td>第二行1</td>
            <td>第二行2</td>
            <td>第二行3</td>
        </tr>

        <tr>
            <td>第三行1</td>
            <td>第三行2</td>
            <td>第三行3</td>
        </tr>
    </table>
</section>

CSS :

section table{
width:90%;
margin:5px auto;
border-collapse: collapse;
border-spacing: 0;
overflow:hidden;
border:1px solid #CCCACC;
border-radius:10px;
-webkit-box-shadow:0 0 4px rgba(0,0,0,0.3);}

section table th{
padding:10px 15px;
border-right:1px solid #CCCACC;
background:#E9E7E9;
text-shadow: 1px 1px 1px #fff;}

section table td{
padding:10px;
border-right:1px solid #CCCACC;
border-top:1px solid #CCCACC;}

section table td:last-child{
text-align:center;
border-right:none;}

CSS: 设置合理的min-width

8月 11, 2017

分类:Web

问题：HTML页面设置自适应，缩小窗口，自适应变小，最小时候可能内容溢出界面

原因：最小的min-width设置偏大，比如320px,导致浏览器宽度已经缩小至250px时候，内容溢出

解决：设置min-width:250px或更小

CSS: li元素设置width百分比后加border出现最后一个li元素挤到下一行

8月 11, 2017

分类:Web

问题：8个li元素，实现4个4个排列，设置每个li元素25%，加上border边框，第四个li元素被挤到下一行

解决：设置属性

 box-sizing: border-box;

可把border和padding包含在width里面，总共计算25%。

例：

.nav_one li{float:left;width:25%;height:100px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;padding:10px;border:1px solid #E7E4DE; }