培训学校
第1到3天
先学习HTML
现在流行的是HTML5,目前学习的是HTML5规范。
(给有基础一定的人学习)
前三天学习的是京东页面的编写,和以前写的不同,页面看上去和自己写的一样,但老师讲的还是有很多不同,更加详细和细节。
1.程序员的规范写法很重要,要方便别人的观看,因此注释十分重要。
《注意点》
2.页面的布局先要看好,分成几块,头部和尾部有很多通用的,可以写在一个css文件里。
3.在用户主要访问的地方,可以写的尽可能美观,如"|"号,首部标签之间可以用<li></li>
包裹,然后再在里面编写width,height,background,如
<li class="dps"></li>;
.dps{
width: 1px;
height: 12px;
background-color: #ddd;
margin-top: 9px;
padding: 0
}
这里要注意,由于li可能有其他padding值,可能会继承,这里设了0。
在尾部可以简化直接写|.
4.以前写代码喜欢布局时喜欢设置height,但这样容易写死,开始写可以写height,但写完了注意去掉。
如果浮动了,可以在一段代码整体布局的地方加上伪元素清除浮动。即.clearfix:after{}

《编写页面笔记》
<1>三角符号即;<i><s>◇</s></i>
i和s都要拖标,即加上postion:absolute;i设宽高,设overflow:hidden;s设font就行
例.shortcut s{
font:400 15px/12px consolas;
position: absolute;
top: -6px;
right: 0;
}
.shortcut i{
width: 15px;
height: 8px;
position: absolute;
right:8px;
top: 12px;
overflow: hidden;
}
如果写的字体代码后面和前面要加上图片或三角以及其他,注意留出空间,如设置padding
<2>改变物体位置关系有三种display:inline-block;postion;float
<3>写不规则形状图标可以使用border-radius:0 0 0 0;为了不被写死,注意不要设宽,设padding
如.shopping-t{
position: absolute;
top: -6px;
right: 7px;
border-radius: 8px 7px 7px 0 ;
background: red;
color:#fff;
padding: 0 3px;
font:400 11px/15px normal;
}


<4>注意如果设置的代码随着页面的缩小随某个中间部分而改变,设置position

如<div class="slogen">
<span class="st sl1"><img src="data:images/service_items_1.png" alt=""/></span>
<span class="st sl2"><img src="data:images/service_items_2.png" alt=""/></span>
<span class="st sl3"><img src="data:images/service_items_3.png" alt=""/></span>
<span class="st sl4"><img src="data:images/service_items_4.png" alt=""/></span>
</div>
.slogen .st{
position: absolute;
left: 50%;
}
.slogen .sl1{
margin-left: -604px;
}
.slogen .sl2{
margin-left: -304px;
}
.slogen .sl4{
margin-left: 305px;
}

<5>a标签经常包裹img(如果图片点击跳转,这是一整张大图,小图或者要移动的图片还是用b,i等),b,i标签等作为小图标和文字左右要添加的样式,注意b,i设display;
同时a设置b,i等作为背景图时,还可以在其中加上一段文字,方便网络爬虫优化
如<a href="#">京东</a>
a{
display: inline-block;
width: 270px;
height: 60px;
background: url("../images/logo-201305.png");
margin-top: 20px;
text-indent: -10000px;/*字远离图片*/
}
<6>如果设置某一段页面在其他页面之上,用z-index,但是如果这段页面浮动了,它必须设置positon:relative;因为它浮动会
脱离标准,就设置不了z-index

<记录学习>(前三天)京东页面各种注意点的更多相关文章

  1. Asp.net MVC4高级编程学习笔记-视图学习第三课Razor页面布局20171010

    Razor页面布局 1)  在布局模板页中使用@RenderBody标记来渲染主要内容.比如很多web页面说头部和尾部相同,中间内容部分使用@RenderBody来显示不同的页面内容. 2)  在布局 ...

  2. Pytorch CNN网络MNIST数字识别 [超详细记录] 学习笔记(三)

    目录 1. 准备数据集 1.1 MNIST数据集获取: 1.2 程序部分 2. 设计网络结构 2.1 网络设计 2.2 程序部分 3. 迭代训练 4. 测试集预测部分 5. 全部代码 1. 准备数据集 ...

  3. JAVA WEB学习笔记(三):简单的基于Tomcat的Web页面

    注意:每次对Tomcat配置文件进行修改后,必须重启Tomcat 在E盘的DATA文件夹中创建TomcatDemo文件夹,并将Tomcat安装路径下的webapps/ROOT中的WEB-INF文件夹复 ...

  4. python学习第三次记录

    python学习第三次记录 python中常用的数据类型: 整数(int) ,字符串(str),布尔值(bool),列表(list),元组(tuple),字典(dict),集合(set). int.数 ...

  5. Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同

    一.三种获取页面元素的方式: getElementById:通过id来获取 <body> <input type="text" value="请输入一个 ...

  6. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  7. 从零开始学习jQuery (三) 管理jQuery包装集

    本系列文章导航 从零开始学习jQuery (三) 管理jQuery包装集 一.摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着 ...

  8. [Firefly引擎][学习笔记三][已完结]所需模块封装

    原地址:http://www.9miao.com/question-15-54671.html 学习笔记一传送门学习笔记二传送门 学习笔记三导读:        笔记三主要就是各个模块的封装了,这里贴 ...

  9. JSP学习笔记(三):简单的Tomcat Web服务器

    注意:每次对Tomcat配置文件进行修改后,必须重启Tomcat 在E盘的DATA文件夹中创建TomcatDemo文件夹,并将Tomcat安装路径下的webapps/ROOT中的WEB-INF文件夹复 ...

随机推荐

  1. Unity导出xcode后自动化导入第三方SDK

    最近因为在给项目接入第三方SDK,遇到了一个比较烦人的事情就是,每次出包都要重新根据第三方SDK说明设置xcode,每次最少花20分钟来设置,如果出错的话就不一定是20分钟的事了,所以我决定要做一个自 ...

  2. 那些年我们写过的T-SQL(上篇)

    在当今这个多种不同数据库混用,各种不同语言不同框架融合的年代(一切为了降低成本并高效的提供服务),知识点多如牛毛.虽然大部分SQL脚本可以使用标准SQL来写,但在实际中,效率就是一切,因而每种不同厂商 ...

  3. Enerprise Solution Main 启动方法源代码

    .NET 系统以Main方法作为应用程序的启动入口点,Enterprise Solution的启动程序源代码如下: [STAThread] static void Main() { string MA ...

  4. 后端码农谈前端(CSS篇)第六课:盒子模型

    元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 提示:背景应用于由内容和内边距.边 ...

  5. 转载--tomcat整合apr

    原文地址: http://zhaosheng.wolf.blog.163.com/blog/static/115304589201212845341723/ APR(Apache Portable R ...

  6. 如何在windows 10 x64安装佳能 CP900 驱动

    佳能太无耻,为了销售CP910 , CP900 到win8 ,win8.1,win 10 都没有驱动程序,网上找的方法都不行,IT民工自有办法: 1.按住shift键,重启电脑 restart 2.在 ...

  7. 使用ajax提交form表单,包括ajax文件上传

    前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },"json"); 又或者是这样的aja ...

  8. Java多线程读取大文件

    前言 今天是五一假期第一天,按理应该是快乐玩耍的日子,但是作为一个北漂到京师的开发人员,实在难想出去那玩耍.好玩的地方比较远,近处又感觉没意思.于是乎,闲着写篇文章,总结下昨天写的程序吧. 昨天下午朋 ...

  9. Azure REST API (1) 前言

    <Windows Azure Platform 系列文章目录> 一.服务运行时API简介 微软的Windows Azure服务总线提供了一整套REST风格的API,其中包括服务运行时API ...

  10. Math.ceil(a/b)结果出错--原因是a和b不是double

    脑袋短路.连续测试几次发现Math.ceil(188/20)==9; 忍无可忍,突然发现是int问题,顺着表达式走一遍,188/20==9,然后再向上取整.脑袋僵化了.看来一直做简单的不动脑筋的工作, ...