（一）div、元素居中中显示方法：

1.宽度要有实际值或百分比值

2.margin:0px auto;

文本内容居中显示的方法：

1.text-align:center;

2.line-height:实际内容高度;（需要有height值）；

（二）商品展示界面：

多数使用列表来展示。实现思路：大的盒子模型里放ul和多个li，li向左浮动（float:left;），ul溢出隐藏（overflow:hidden;）。

在实现展示前，需计算出每个li的宽度+li与li之间的间隙外边距，一般每行行尾展示的那个li不需要设置水平方向上的外边距，以实现紧密展示，所以会用到nth-of-type(n)选择器，将最后行尾的li的外边距去除。

li里边放内容，一般上边图片，下边是商品简述和商品价格、购物车跳转界面。

ccs效果：鼠标移入前正常，鼠标移入后整个li出现蒙层效果，字体颜色变化。实现思路：①用hover伪类选择器，写改变后的样式属性，谨记要想清楚给哪个元素标签添加选择器，是哪个元素标签发生变化。②JavaScript写，首先获取标签并赋予变量；然后对使用onmouseover和onmouserout分别写入鼠标移入前的样式和鼠标移入后的样式，display：none；和display：block；可以实现元素的显示消失效果；最后注意javaScript的位置，一般都写在body最后面。③用jQuery写，不同var变量，直接获取标签，mouseover和mouseout对应鼠标移入移除，$('标签名').css('属性','值'）。记得引入jQuery库。

（三）图片放大

       <style type="text/css">

         .div_1{

             display: inline-block;

             width: 500px;

             height: 500px;

             border: 1px solid blue;

             position: relative;

         }

         .img1{

             width: 400px;

             height: 320px;

             position: absolute;

             left:;

             top:;

             transition: all .4s;

             cursor: pointer;

         }

         .img1:hover{

             zoom:;

             transform: scale(1.2);

         }

         .div_2{

             display: inline-block;

             width: 500px;

             height: 500px;

             border: 1px solid yellow;

             position: relative;

         }

         .img2{

             width: 400px;

             height: 320px;

             position: absolute;

             top:;right:;bottom:;left:;

             margin: auto;

             transition: all .4s;

             cursor: pointer;

         }

         .img2:hover{

       zoom:;

      transform: scale(1.2);

 }

 /*zoom:设置或检索对象的缩放比例*/

  /*zoom缩放会将元素保持在左上角，而scale默认是中间位置*/
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <body>

     <div class="div_1">

         <img class="img1" src="img/one4.jpg" alt="">

     </div>

     <div class="div_2">

         <img class="img2" src="img/one5.jpg" alt="">

     </div>

 </body>

 </html>
关键知识：transform: scale(倍数)：实现元素的缩放，1为元素值，一般与hover配合使用写css，或者与mouseover和mouseout配合使用写javascript或者jQuery库；

zoom:设置或检索对象的缩放比例,zoom缩放会将元素保持在左上角，而scale默认是中间位置.

（四）矩形宽四角变椭圆形（input框）
1.设置px值
　　①根据元素标签实际的宽度计算出需要的px值
　　②宽度像素的20%左右值，border-radius:(box的宽度*20%)px;
2.设置%值
　　①border-radius：20%； 
（五）正方形盒子变圆形
1.宽高一样
2.border-radius：50%；
3.border-radius：宽的一半px；

（六）css通用样式设置
body,p,h1,h2,h3,h4,h5,h6{margin:0;}
ul,ol{list-style:none;margin:0;padding:0;}
（七）css参考样式集合
一.字体属性：（font）
1.大小{font-size:px}
2.样式{font-style:oblique;}(偏斜体)italic;（斜体）normal;（正常）
3.粗细{font-weight:bold;}（粗体）lighter;（细体）normal（正常）
4.行高{font-height:normal}
5.修饰{text-decoration:underline;}（下划线）overline;（上划线）line-through;（删除线）blink;（闪烁）
二.常用字体：（font-family）
三.

（八）切换类名实现样式的更换jQuery和显示隐藏
$('#two').toggleClass('anotherClass')//重复切换anotherClass
jQuery中 toggle和sildeToggle方法都能实现对一个元素的显示和隐藏，区别是：
toggle:动态效果为从右至左。横向动作
slideToggle:动态效果为从下至上。竖向动作。（由下至上收缩）

（九）两端对齐（表单文字）
 div.justify

 {

 　　text-align: justify; width:200px; font-size:15px; color:red;

 　　border:1px solid blue; height:18px;

 }

 div.justify > span

 {

 　　display: inline-block /* Opera */;

 　　padding-left: 100%;

 }

 HTML：

 <div class="justify">hello, text justify.</div><br/>

 <div class="justify"> hello, text justify.<span></span></div><br/>

 <div class="justify">中 文 两 端 对 齐</div><br/>

 <div class="justify">中 文 两 端 对 齐<span></span></div>

只有最后一个完成两端对齐。

除了要在块级元素加text-align:justify样式外，还需要在里面加一个空的span元素，并应用样式。另外，对于中文还必须用空格隔开汉字，否则也没有两端对齐的效果。

 

html+css+javascript网页制作技巧总结1的更多相关文章

  1. HTML、CSS、JavaScript网页制作从入门到精通 (刘西杰) pdf扫描版彩色版​

    html.css.JavaScript网页制作从入门到精通中从基础知识开始讲起,如html的基本标记.文字与段落标记.表格标记.超链接标记……同时介绍了目前流行的web标准与css网页布局实例,以及基 ...

  2. Html JavaScript网页制作与开发完全学习手册

    Html JavaScript网页制作与开发完全学习手册 篇 HTML技术章 HTML入门 1.1 什么是HTML 1.1.1 HTML的特点 1.1.2 HTML的历史 1.2 HTML文件的基本结 ...

  3. HTML5 网页制作技巧

    本文总结自由人民邮电出版社出版的<HTML.CSS.Javascript网页制作>. 总结进行学习,并分享给同样编写HTML5的朋友. 1:背景音乐的添加 <embed src=&q ...

  4. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  5. 《HTML、CSS、Javascript网页制作，从入门到精通》——第一章 HTML基础，第二章HTML基本标记

    1)HTML的基本概念 HTML就一种描述性的标记语言,是文档的超文本标记语言. 基本结构为: HTML标记组成  : <标记元素> 源文件中标记是不区分大小写的. 2)编写方法: 1&g ...

  6. JavaScript网页制作特效

    一.什么是JavaScript? 网页交互特效的脚本语言. 特效 二.BOM对象 能够使得JavaScript和浏览器进行对话. 主要是使用Window对象进行操作. History对象:历史,可以实 ...

  7. 网页制作技巧:iframe自适应高度

    转自:http://www.enet.com.cn/article/2012/0620/A20120620126237.shtml 通过Google搜索iframe 自适应高度,结果5W多条,搜索if ...

  8. css+div网页设计（一）--基础知识

    css是网页制作不可缺少的部分,我会用三篇博客为大家展示css的基本用法. 关于css+div的整体结构图总结如下: 本篇博客主要介绍css的基础知识. 一.css概念; css(级联样式表):它是一 ...

  9. HTML,Css,JavaScript之间的关系

    简述HTML,Css,JavaScript 网页设计思路是把网页分成三个层次,即:结构层(HTML).表示层(CSS).行为层(Javascript). 1.HTML(超文本标记语言 Hyper Te ...

随机推荐

  1. 十、collection的作用+变量

    一.collection作用?容器 组织业务逻辑 导入导出 其他功能,比如监控和mock server 二.为什么要使用变量 假设我们需要测试n个api,这些api的domain都是相同的,比如 ap ...

  2. @ServeletComponentScan和@ComponentScan的区别

    一.SpringBoot中使用Servlet在SpringBootApplication上使用@ServletComponentScan注解后,Servlet.Filter.Listener可以直接通 ...

  3. linux非root用户安装5.7.27版本mysql

    先下安装包,到mysql官网https://dev.mysql.com/downloads/mysql/选好安装包版本.操作系统类型(默认是最新版本,点击右边链接Looking for previou ...

  4. [Sklearn] Linear regression models to fit noisy data

    Ref: [Link] sklearn各种回归和预测[各线性模型对噪声的反应] Ref: Linear Regression 实战[循序渐进思考过程] Ref: simple linear regre ...

  5. 报错：Connection to node -1 could not be established. Broker may not be available. (org.apache.kafka.clients.NetworkClient)

    报错背景: 启动kafka消费者之后出现这种报错,持续打印相同信息. 报错现象: [root@master kafka_2.-]# /opt/kafka/kafka_2.-/bin/kafka-con ...

  6. 09点睛Spring MVC4.1-异步请求处理(包含兼容浏览器的服务器端推送)

    转发地址:https://www.iteye.com/blog/wiselyman-2215852 9.1 异步请求处理 Servlet 3开始支持异步请求处理 Spring MVC 3.2开始支持S ...

  7. 【GStreamer开发】GStreamer基础教程14——常用的element

    目标 本教程给出了一系列开发中常用的element.它们包括大杂烩般的eleemnt(比如playbin2)以及一些调试时很有用的element. 简单来说,下面用gst-launch这个工具给出一个 ...

  8. C++ 理解函数对象与lambda表达式

    参考<21天学通C++>第21与第22章节,对函数对象进行介绍,同时通过lambda表达式这一匿名函数对象的简洁方式加深对函数对象的理解.本篇博文的主要内容是: (1) 函数对象的概念: ...

  9. Actor模型的状态（State）+行为（Behavior）+邮箱（Mailbox）

    状态(State)+行为(Behavior)+邮箱(Mailbox) 基于Actor模型的CQRS.ES解决方案分享 开场白 大家晚上好,我是郑承良,跟大家分享的话题是<基于Actor模型的CQ ...

  10. git push时出现大文件的处理方法

    最近在提交项目时出现报错 文件限制只能100M,但是里面有个文件202M,超过了码云的限制. 所以顺手就把这个文件删除了 然后发现还是同样的报错,反复检查目录还是不行,找了资料说,需要git rm 命 ...