CSS实战2

前端开发css实战：使用css制作网页中的多级菜单

前端开发css实战:使用css制作网页中的多级菜单在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简单),使用css的优势显而易见,它可以使页面中的javascript变得更少. 实现逻辑: 核心:hover伪类控制子元素的显示隐藏,添加css3动画; (没错就是这样简单) :hover伪类,适用于当用户指向一个元素时,例如用户的鼠标指向一个段落p.当用户鼠标离开元素时,恢复元素原有的样式显示…

DIV+CSS实战(三)

一.说明在上篇博客<DIV+CSS实战(二)>中,实现了头部以及Tab标签卡,下面开始实现内容区域,要实现的效果如下: 二.内容最外层的设计(边框) 给最外层加边框,并且设置高度随着里面的内容自动增加 CSS样式 .divContent{ width: 100%; float: left; margin-top: 3px; border: 1px solid #e8e7e7; padding-top: 20px; height: auto; } 三.内容里面的Tab标签 jsp设计 <…

DIV+CSS实战(二)

一.说明在DIV+CSS实战(一)中,已经把框架搭建起来了,现在就需要往框架里面添加内容了.需要实现的内容如下图: 二.头部的设计(全媒体订阅) 左侧是一张图片+标题 ,右侧是登录名和上次登录的时间 (1).标题的设计(左侧) jsp代码 <div class="divHeader"> <h1>全媒体订阅</h1> <div> <p> 欢迎您:<span class="color2">中科大…

CSS实战中经常出现的问题。

如果你把这些当做文章来看,那你始终是学不会,而是应该当做手册来看,这些也是自己在写网站遇到的问题.转载请出处. 追梦子前端博客. 1. logo添加内容给h1设置text-index:-9999px的时候会把里面的其他标签也给定位过去. 解决方法:如果要添加内容,那么图片用背景来做. 2. button高度问题 button在高度计算上始终使用了Quirks模式.在Quirks模式下,边框的计算是在元素的宽度内的,而不像标准模式一样计算在外部,所以在text和button上同时设置边框就会得到b…

第一天CSS实战培训及笔记及感想

首先,我很激动...... 3点了,凌晨3点了,我居然还没睡.总共不到3个小时的视频消化了6个小时,今天是培训班第一天,一下子就来高强度的讲课,整个上过基础班的都听得东倒西歪,更别说我这个没上基础班滴人,基本上讲完让自己做是无从下手的,很多基本的东西不会,例如fw和ws的基本操作也不会,就这么磕磕绊绊的学了一天回来抱着啃视频,一点点的跟着做事例,然后就做到现在了...实际上跟我的计划还差的有些远,我以为也就12点弄完了,然后再写一遍,没想到一直折腾到3点,而且还不敢保证说全会.不过好赖这么细嚼慢…

CSS 权威指南 CSS实战手册第四版（阅读笔记）

前言: 对于程序员,学习是无止境的,知识淘换非常快,能够快速稳固掌握一门新技术,是一个程序员应该具备的素质.这里将分析本人一点点不成熟的心得. 了解一门语言,了解它的概念非常重要,但是一些优秀的设计思想需要细心和大量实践才能慢慢参悟,在这之前需要做的是能够运用它来开发,那么了解一些基础特性非常有必要,通常这些特性是需要经验积累,从各种坑中累计出来,但是还有一种看似很笨却很有效的学习方法.那就是将别人的经验记录下来,有事没事都拿出来看看,集合开发中的经验,这会非常有效. 流式布局 http://b…

css实战——第一天

1. 开发前的准备 1.1配置开发环境 sublime webstorm vscode Hbuilder atom 1.2建立项目文件夹主页或是首页 index.html default.html Css文件夹 css文件的 Base.css global.css Images文件夹用来放置网站中的所有的图片 Js文件音频或是视频文件 1.3样式初始化我们的结构中的标签都有默认的样式,在各个浏览器中的显示有可能不尽不同 ,为了保证网站风格的统一或是…

DIV+CSS实战(四)

一.说明在上篇博文<DIV+CSS(三)>中,一个页面基本上展示出来了!下面实现以下页面上的一些功能,比方批量删除等功能.这里以批量删除为例,批量禁止,批量启用和批量删除差不多,只不过一个是删除,一个是修改,就不一一介绍了,删除的话,会用到一些插件,例如:alpha.css.css1.css.drag.js,可以点击其进行下载!最终实现的效果图如下: 二.批量的全选,全部选的实现在我前面的博客<checkbox数据回显问题>中,有详细介绍这个问题.这里就不详细介绍了 JSP设计…

DIV+CSS实战(一)

一.说明作为一个后台的程序员,我也是很少写前端,最近有一个项目,前端主要是由我来负责,就把我在项目中所学到的东西,记录下来!我的页面要嵌入到另一个系统中,所以,并不是按照传统的top,left,content,我只写了content部分!我一直觉得知识都是在项目中总结出来的,在做项目的过程中,才能把知识学以致用,并且加深理解,先看效果图: 二.分析网页body 里面是一个DIV,然后DIV又包含了三个DIV,分别是DIV1,DIV2,DIV3. DIV1对应图片中头部分,也就是全媒体订阅部分…

DIV+CSS实战（五）

一.说明前面实现了关键词订阅模块,现在实现站点订阅模块,主要实现的是站点添加界面.站点添加界面里面实现一个提示框不在提示的功能(保存到cookie中),还有就是实现一个站点的选择框,包括输入文字自动筛选的功能.如下效果图: 二.提示框的实现先把添加的界面整体实现了,就是一个DIV中放了一个表格,表格有一行两列,分别是<td><table></table>(第一列放的是客户ID,状态.....)</td> <td>DIV</…

CSS 实战1

1.CSS 初始化 @charset "UTF-8"; /*css 初始化 */ html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {;; } fieldset, img,input,button {;;outline-style:none; } ul, ol { list-style:none; } input {;; font-family: &quo…

css实战笔记（一）：写网页前的reset工作

reset.css是每个html必备的样式,其中有各种元素属性清零的代码. 为什么要有reset.css 让各个浏览器的CSS样式有一个统一的基准,比如清除各个浏览器为元素自带的margin.padding等.reset必要性的例子: 随便写一个div,发现它的左边与上边都与浏览器边框有白色空隙: 在css中加入margin.padding清零的代码后,div的边缘与浏览器完全贴合: 所有类似红线画出的用作元素初始化(标准化)操作的代码的集合,写在reset.cs…

css实战#用css画一个中国结

大家好!今天跟大家分享一个用 css 画中国结的教程.最终效果如下: 大家如果感兴趣可以参考我的源码:gitHub地址首先,我们定义好画中国结需要的结构: <div class="knot"> <span class="box"></span> <span class="box"></span> <span class="box"></span&g…

css 实战技巧

css 看起来比较简单,但是要想做的好也不是那么容易,我们在平时开发中,主要用css 来美化我们的html结构,所有我觉得css 还是挺重要的,这里记录整理一些关于css 的技巧以及容易忘记的知识点. 1.css 问题解决思路在遇到css问题时,我一般从以下思路来思考从元素本身的属性出发,组合各种可能: 如果第一步没有成功,那么在元素之外(或者之内)套一层元素,再次尝试: 一般问题都能在第二步解决,如果还是没有,那就要求助场外观众了(before和after); 还不行的话,则看看有没有不知…

CSS实战模拟新闻列表

总结:所使用的知识点:1.padding应用以及box-sizing: border-box自动内减撑大的盒子 2.ul>li 的使用,去除黑圆圈 3.a标签的使用,去除默认样式<下划线> html结构 <div class="box"> <h2>最新文章/New Articles</h2> <ul> <li><a href="#">北京招聘网页设计,平面设计,php</…

css实战第三天小结

1.谈一谈对层级的理解: 如果对两个并列的子元素都设置了相对于同一个父元素(如果没有设置父元素那么默认相对于浏览器而言)进行了定位(相对定位),则这两个都具有相同的层级(默认为0),他们的trbl也默认为0,此时后面的一个子元素会覆盖前面一个子元素: 效果: 如果想让前面的子元素显示在后面的一个子元素的上面,那么应该在上面一个子元素上设置z-index:1; 2．子盒子的居中算法: 效果图: 3.Overflow:hideen的使用: 当子元素的宽度或高度超出父元素的宽高时我们在一些情况下需要隐…

Css实战第二天小结

清除浮动的四种方式: 1.1 给父盒子设置一个高度: 1.2 Clear:both; 1.3 Overflow:hidden; 1.4 使用伪元素 .clearfix:before, .clearfix:after{ content:” ”; display:table; } Clearfix:after{ Clear:both; } Clearfix{ /*兼容ie6*/ Zoom:1; } 2.对定位元素的层级理解:如果我们只给一个元素定位,而不设置它…

CSS实战3

1. z-index 层级 div 层 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> /* .test { width: 150px; height: 300px; border: 1px solid #ccc; margin-top: 100px;…

1. 鼠标样式 Cursor: pointer 鼠标变成小手 Cursor: default; 小白 Cursor : move; 移动 Cursor : text ; 文本输入网页布局: 给一个盒子 : 宽度高度背景边框位置 2.border-radius 圆角矩形 border-radius: 7px 7px 7px 0; border-radius: 左上右上右下左下: (顺时针) 3.标签嵌套 1. 块级元素 --- 任何元素可以的…

【回顾整理】HTML+CSS个的两个实战项目

一:麦子商城首页制作代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="ytf-8"> <title>html+css</title> <link rel="stylesheet" href="css/style.css"/> <!--link style="t…

Web前端温故知新-CSS基础

一.CSS定义与编写CSS 1.1 CSS的定义全名:Cascading Style Sheets -> 层叠样式表定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式.CSS以HTML为基础,提供了丰富的功能(如字体.颜色.背景的控制以及整体排版等等),还可以针对不同的浏览器设置不同的样式. 1.2 HTML.CSS与JS三者的关系 HTML:页面结构,负责从语义的角度搭建页面结构.…

20个编写现代CSS代码的建议

明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较大值会被保留下来,可以从下面这个简单的例子来学习: .square { width: 80px; height: 80px; } .red { background-color: #F44336; margin-bottom: 40px; } .blue { background-color: #2…

常用的css的技巧

1.在做项目当中,由静态页面来载入到项目中,作为动态数据的部分,若是这个动态数据,前面或者后面有需要图片显示(图片是用background来显示的),一般不用float:left或者right,而是padding. 例如:预览 2.做瑞祥装饰的手机端时,遇到一个问题, 3.很多时候我们写导航的时候,导航每个li之间可能会有间隔线,但是我们经常会去要设置最后一个间隔线为无,一般会使用 li:last-child. li:last-child{border-right:none;} 4.经常会遇到需…

用CSS画小猪佩奇，你就是下一个社会人！

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:江志耿 | 腾讯TEG网络工程师我是佩奇,哼,这是我的弟弟乔治,呱呱,这是我的妈妈,嚯,这是我的爸爸,嚯~ 背景小猪佩奇已经火了好一阵了,其实一开始我是不屑的.纵观小朋友的历届动画,无论喜洋洋.熊出没还是小兔兵兵.小熊维尼,火过一阵便迅速陨落,回想起来也没多少沉淀的东西.所以一开始让我看小猪佩奇的时候我是拒绝的,因为你不能让我看,我就马上去看,第一我要试一下.深入了解之后发现,卧槽,世间竟有如此出尘绝艳的动画片!正如某个浙江人…

HTML+CSS+JS 传智详细笔记

HTML(1)- -毕向东老师对Html的简介 CSS- -毕老师对CSS的简介 Javascript- -毕老师对JS的简介 html&css等等练习表(W3Cscholl) js练习表回顾 HTML(2)- -传智前端课程系列笔记 HTML(3)- -传智前端课程系列笔记 HTML(4)- -传智前端课程系列笔记 CSS(1)- -传智前端课程系列笔记 CSSTest- -传智前端课程系列笔记 CSS(2)- -传智前端课程系列笔记 CSS(3)- -传智前端课程系列笔记 CSS(4)- -…

【CSS实战2】的更多相关文章