1.居中问题

比如让宽度为60%的<div class="box">居中,可以再.box里面设置margin:auto

2.高度固定的div里面有两个子类div且高度和父类一致,但是不是左右排列,而是上下排列

原因是没有设置float属性。

3.在设计整个页面时,要考虑的东西(持续更新)

首先抓住页面的共性,把这些共性提取出来

4.h标签

不能直接使用。可以定义的有<h1>~~<h6>.

<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。

由于 h 元素拥有确切的语义,因此请您慎重地选择恰当的标签层级来构建文档的结构。因此,请不要利用标题标签来改变同一行中的字体大小。相反,我们应当使用层叠样式表定义来达到漂亮的显示效果。在使用时css比较好的用法是直接定义h1 ,h2而不是定义

某某div.class h1{}这样就违背了本身的原意。

5.css

ul.box-icon li{
width: 110px;
height: 150px;
padding-right: 34px;
float: left;
}

ul.box-icon li.last{
     width: 110px;
     height: 150px;
     float: left;
}

 

在 <li class="last">里面的所有的属性将会依然包含padding-right:34px;  如果想要消除这个必须在ul.box-icon li.last 里面设置padding-right:0;

6.css里面图片竖直居中

  <div class="logo">
<a href="/"><img src="/static/image/logo_03.png" alt=""/></a>
</div>

css设置

.logo a {
position: absolute;
height: 82px;
line-height: 82px;
}
.logo a img{
vertical-align: middle;
}

需要注意的是:.logo a 里面必须要设置line-height的高度,否则图片不会居中。

7.图片大小比例随着窗口变化等比例缩放

.banner img{
width: 100%;
display: block;
}

8.css控制单行文本

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

  

css的小问题总结的更多相关文章

  1. css的小技巧

    前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...

  2. 一些常用的html/CSS效果---小技巧

    我常用的重置样式表reset.css /*===============基础信息================*/ *{border: 0;padding: 0;margin: 0;} table ...

  3. 如何使用CSS实现小三角形效果

    如何使用CSS实现小三角形效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在众多的网页效果中,都有小三角形效果的应用,能够增加特定应用的美观度,下面就给出一段实例代码,里面介绍了两种实现小 ...

  4. 第八十四节,css布局小技巧及font-awesome图标使用

    css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...

  5. 通过css实现小三角形

    下面是用css做小三角形的demo, <!DOCTYPE html><html lang="en"><head> <meta charse ...

  6. css样式小技巧

    1.css样式小技巧 HTML怎样设定使背景图片不随页面滚动而滚动 background-attachment:fixed; 2.实现li a 超过长度内容出现省略号… overflow:hidden ...

  7. CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅

    首页   登录注册         CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅 阅读 8113 收藏 927 2017-09-26 原文链接:github.com 腾讯云容器服务CSS,立 ...

  8. web 前端2 html css一些小问题技巧

    html css一些小问题技巧 1 对于儿子块float后,父亲块如果没内容就不见了,如何让父亲块依然跟随飘起了的儿子块撑起来呢?? 用到的属性after方法  公共方法作为继承即可. 1.1  方法 ...

  9. css 样式小窍门

    css 样式小窍门 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  10. CSS制作小旗子与小箭头

    CSS制作小旗子与小箭头 效果图如下: 小旗子效果图 小箭头效果图 小旗子效果 以下是具体实现代码: <div class="container"> <div c ...

随机推荐

  1. OC中的面向对象语法3

    一. set方法和get方法 1. set方法和get方法的使用场合 @public的成员可以被随意赋值,应该使用set方法和get方法来管理成员的访问(类似机场的安检.水龙头过滤,过滤掉不合理的东西 ...

  2. SVProgressHUD进度条蒙版

    GitHub:https://github.com/samvermette/SVProgressHUDSVProgressHUD和MBProgressHUD效果差不多,不过不需要使用协议,同时也不需要 ...

  3. Hierarchyid 常用操作

        ---------内置函数------------ select hierarchyid::GetRoot()--0x select hierarchyid::Parse('/1/1/') - ...

  4. 10、技术经理要阅读的书籍 - IT软件人员书籍系列文章

    技术经理是项目组中的重要角色.他需要负责软件项目中的重要部分,如果项目组没有架构师的话,技术经理还需要担负起架构师的职责.同时,技术经理要对项目中的所有重要的技术问题进行处理. 但是,在项目组内部,软 ...

  5. FileOutputStream VS FileWriter

    当我们使用Java往文件写入数据的时候,我们有两种方式,使用FileOutputStream或FileWriter. FileOutputStream: File fout = new File(fi ...

  6. 清除ASPX页面中的meta:resourceKey="[a-zA-Z0-9]+"

    在替换对话框中,选中“使用正则表达式”, 被替换内容,使用 meta:resourceKey="[a-zA-Z0-9]+" 然后替换整个文档就可以了.

  7. 挖一挖C#中那些我们不常用的东西之系列(4)——GetHashCode,ExpandoObject

    这篇继续分享下GetHashCode和ExpandoObject这两个比较好玩的方法. 一:GetHashCode 从MSDN上可以看到的解释是:用作特定类型的哈希函数,也就是说任何对象的实例都会有一 ...

  8. Dubbo 分布式服务框架(spring、zookeeper)

    DUBBO DUBBO是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,是阿里巴巴SOA服务化治理方案的核心框架, alibaba资源 源码:https://github.com ...

  9. 【Linux】将Oracle安装目录从根目录下迁移到逻辑卷

    [Linux]将Oracle安装目录从根目录下迁移到逻辑卷 1.1  BLOG文档结构图 1.2  前言部分 1.2.1  导读和注意事项 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到 ...

  10. Oracle表字段的增加、删除、修改和重命名

    本文主要是关于Oracle数据库表中字段的增加.删除.修改和重命名的操作. 增加字段语法:alter table tablename add (column datatype [default val ...