通过这次任务的练习我学到了很多,现将所学到的以及遇到的问题总结如下。

源码地址:http://pan.baidu.com/s/1kVB2VZL

下面出现的代码,都是摘自这个上面的源码

1、终于明白了absolute,relative,float的用法了,这三者结合在一起真的很强大。当然要注意的就是清除浮动了。

清除浮动所用的代码:

.clearfix {
*zoom:;
}
.clearfix:before, .clearfix:after {
display: table;
line-height:;
content: "";
}
.clearfix:after {
clear: both;
}

2、input元素当你用鼠标点击后,外面可能会出现一个方框,你可以使用下面的清除:

outline: none;

3、对于button元素,你设置了背景后,点击的时候周围会出现方框,如果你想去掉方框的话:

border: none;

4、即使你设置了元素的大小,但是,当你添加内容或者设置padding,margin的时候,又会发生改变,从而你得再次修改。不过这时你可以使用box-sizing,css中有一篇就是专门讲这个的,要注意不同的浏览器。

-moz-box-sizing: border-box;  /*Firefox3.5+*/
-webkit-box-sizing: border-box; /*Safari3.2+*/
-o-box-sizing: border-box; /*Opera9.6*/
-ms-box-sizing: border-box; /*IE8*/
box-sizing:border-box;

5、before, after这两种伪元素的使用。可以用在添加图标啊,或者hover的时候,出现下划线上划线。

.query-info-1 li:hover:before,.query-info-1 li.cur:before{
content:'';
position:absolute;
top:-1px;
left:-1px;
width:110px;
height:4px;
background:#4388c9;
}

6、最受启发的就是第一组项目中的table的实现了,这里面包含很多的技术思想,很受启发

1)不用js实现点击后的效果的切换:

部分html代码

                <li>
<input type="radio" name='tabs' id='tab1' checked >
<label for="tab1">项目一</label>
<div id='tab_menu1'>
<table>
<tr><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td> <td>购买材料一</td> </tr>
<tr><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td> <td>购买材料一</td> </tr>
<tr><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td> <td>购买材料一</td> </tr>
<tr><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td> <td>购买材料一</td> </tr>
<tr><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td> <td>购买材料一</td> </tr>
</table>
</div>
</li>

css代码

.project_tab_menu [id^='tab']:checked ~ [id^='tab_menu']{
display: block;
position:absolute;
width:403px;
border-radius:0 5px 5px;
padding:28px 40px 35px 38px;
left:;
top:40px;
font-size: 14px;
border: 1px solid #DDDDDD;
}
.project_tab_menu [id^='tab']:checked~label{/*当选中tab开头的id,则为其后面的label元素添加下面这些样式*/
position: relative;
z-index:;
border:1px solid #DDDDDD;
border-bottom: none;
background: #fff;
height:28px;
font-size: 14px;
}
[title~=flower]
{
background-color:yellow;
}

[attribute~=value] 选择器用于选取属性值中包含指定词汇的元素。

选择 titile 属性包含单词 "flower" 的元素,并设置其样式:

这一段程序其实是参考别人的,他很聪明,采用radio来实现不同的项目的选择。并将<label>下的table设置为不可见,这样,所有的radio就可以排成一排。当其中一个按钮被选中后,再将其对应的table设置为display:block显示出来。

7、input元素与文本对齐

一般情况下会选用:

vertical-align:middle;

但是有时候效果并不是很好

可以直接将input元素定位住

input{
position:absolute;
top:5px;
left:5px;
}

8、有时候在一行中,文字中间会有空格,这时候可以添加<span>      </span>元素,而不用添加空格的字符编码。

9、有时候你可能要添加好几个图标,这时候可以选用一些行内元素插进去比如<i>,<span>等

10、设置table的线框和边距,不推荐使用<table border="1"  cellspacing="0"  cellpadding="0">使用这种出来的边框会比设置要粗一些,可以这样设置

.project table tr td{
border:1px solid #D6D6D6;
}
.project table{
border-collapse:collapse;
color:#64656A;
}
11、后面再写页面的时候,可以先设置reset.css,这样比较省时省力。

百度前端技术学院-task1.8源代码以及个人总结的更多相关文章

  1. 百度前端技术学院-task1.3源代码

    因为其中有图片,所以就给有图片的位置加了边框和设置了大小,这样哪怕图片不显示也可以知道在哪里. <!DOCTYPE html> <html> <head> < ...

  2. 百度前端技术学院-task1.10源代码

    任务十的源代码,其实有github的,但就是不知道怎么弄,近期会学会的.在IE和firefox上检测运行良好. <!DOCTYPE html> <html lang="en ...

  3. 百度前端技术学院-task1.8源代码

    主要是不采用bootstrap实现网格. 遇到的困难及注意点如下: 1.[class*='col-'],这个是选择col-开头的类,第一次用,以前也只是看到过: 2.媒体查询,总觉得容易理解错误.@m ...

  4. 百度前端技术学院-task1.4源代码

    任务描述 实现如 示例图(点击打开) 的效果 灰色元素水平垂直居中,有两个四分之一圆位于其左上角和右下角. 任务注意事项 思考不同情况下(如灰色高度是根据内容动态变化的)水平垂直居中的解决方案. 动手 ...

  5. 百度前端技术学院task1.10

    任务十:Flexbox 布局练习 面向人群: 有一定HTML及CSS基础的同学 难度: 中 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容 ...

  6. 百度前端技术学院task1 总结

    1.居中:当使用text-align或者vatical-align无法达到居中的时候,如果知道元素的大小,可以采用先设为left或right为50%,再设置margin-left或者margin-ri ...

  7. 百度前端技术学院(IFE)2016春季学期总结

    今天(5月16日)作为第八个提交者提交了任务五十:RIA微型问卷管理平台 这样一个综合性的大任务,宣告我的IFE春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...

  8. 百度前端技术学院—-小薇学院(HTML+CSS课程任务)

    任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...

  9. 通过Github Pages在线查看百度前端技术学院完成的任务成果

    前言 .note-content {font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHe ...

随机推荐

  1. scikit-FEM-例2-用Morley元在方形区域上解板弯曲问题

    """ Author: kinnala Solve the Kirchhoff plate bending problem in a unit square with c ...

  2. Oracle PLSQL读取(解析)Excel文档

    http://www.itpub.net/thread-1921612-1-1.html !!!https://code.google.com/p/plsql-utils/ Introduction介 ...

  3. android.os.NetworkOnMainThreadException的解决方案

    06-24 18:04:36.857: E/AndroidRuntime(22251): FATAL EXCEPTION: main 06-24 18:04:36.857: E/AndroidRunt ...

  4. 简单理解 OAuth 2.0 及资料收集,IdentityServer4 部分源码解析

    简单理解 OAuth 2.0 及资料收集,IdentityServer4 部分源码解析 虽然经常用 OAuth 2.0,但是原理却不曾了解,印象里觉得很简单,请求跳来跳去,今天看完相关介绍,就来捋一捋 ...

  5. iis支持asp.net4.0的注册命令使用方法

    32位的Windows: 1. 运行->cmd 2. cd C:\Windows\Microsoft.NET\Framework\v4.0.30319 3. aspnet_regiis.exe ...

  6. C#实时检测端口占用情况

    在TCP/IP协议中,服务端需要去监听客户端的端口,开始监听,我们需要检测使用的端口是否被占用,获取系统当前使用的所有端口号,用此端口进行匹配即可. 代码如下 internal static Bool ...

  7. Flask中的before_request和after_request

    1.@app.before_request 在请求(request)之前做出响应 @app.before_request 也是一个装饰器,他所装饰的函数,都会在请求进入视图函数之前执行 2.@app. ...

  8. 关于axios及其在vue中的配置

    什么是axios?官方解释:axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 具有以下特点: 从浏览器中创建 XMLHttpRequests 从 nod ...

  9. JFrame、JPanel 、Layout开发的简单例子

    写了Java这么久,居然发现想手写一个带网格袋布局的JFrame,还不记得怎么写,写了这么多代码真不敢说记得所有细节. 幸好,只要记清楚概念就能快速开发.首先,明确一下3种容器类的差别和用途: No. ...

  10. 关于oracle RAC心跳线采用直连 还是交换机连接的建议

    关于oracle RAC心跳线的连接方式,各个论坛,包括网上文章的说法是:官方说是不建议直连,建议采用交换机连接的方式!PS:但是,一直没有找到官方文档的出处,有知道的兄弟,烦请评论区提供下地址!!! ...