`
Ramls
  • 浏览: 37404 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

小反 DIV+CSS

阅读更多

这是陌生的师父教我的,他说这是他十年的功力,我要好好的领悟,也谢谢这位陌生的师父。

 

呵,看你是有慧根,所以不用从头教。几句话你就会了。
写表现层代码,跟你写类一样,语义化很重要,再有就是表现层的代码是先构造灵活的结构层(html),再

写css的,你练上几拳就会了,而结构层的代码除了命名要语义化,还要考虑模块化,尽可能使你的构造

能重用。


比如一个图文混排的代码如下:
<div id="news">
<p><img src="x.jpg" /></P>
<ul><li>newstitle</Li></ul>
</div>

你跟据这个结构定义的css就是

#news {}
#news p {}
#news ul {}
...

这就是模块化、语义化
不要写太多的id,id是用来标识内容主体的,除非它是特殊内容,否则减少使用

id和class名

 

6
0
分享到:
评论
5 楼 Ramls 2011-04-25  
正在努力学习中,谢谢大家。。
4 楼 龙拳鬼步 2011-04-14  
他说这是他十年的功力,我要好好的领悟
兄弟,多看看书吧,打好基础
很多css书上都讲到规范化的问题。。。
3 楼 jancy 2011-04-08  
itsuki 写道
重复使用模块要用class
.news p
.news ul {}

重复使用选择器(模块)是可以用id的,只要不对多个模块id属性赋同一值即可。

赞同楼主所叙。
2 楼 itsuki 2011-04-05  
重复使用模块要用class
.news p
.news ul {}
1 楼 argont 2011-04-03  
是的,我支持你的说法!

相关推荐

    巨龙效果图自动切片生成Div+Css软件 源码

    《巨龙效果图自动切片生成Div+Css软件 源码》是一款专为网页设计师打造的工具,旨在简化网页设计中的切片与布局工作。它使用C#编程语言编写,并可以通过Reflector这样的反编译工具进行解析。源码虽存在一些小问题,...

    用HTML+CSS做一个漂亮简单的旅游网站——旅游网页设计与实现(6页)HTML+CSS+JavaScript

    - **反垃圾评论机制**: 实现简单的人机验证(如验证码),防止恶意评论。 ### 三、工具与技术栈 - **HTML编辑器**: 如Dreamweaver、HBuilder、Vscode、Sublime等,支持实时预览和代码高亮。 - **版本控制**: 使用...

    css+div漂亮的圆角tab选项卡

    在本主题“css+div漂亮的圆角tab选项卡”中,我们将深入探讨如何利用CSS和HTML创建具有美观圆角效果的tab选项卡。 首先,HTML结构是实现tab选项卡的基础。一个基本的tab选项卡结构通常包含一个容器(如`&lt;div&gt;`),...

    CSS+JQuery实现div翻转效果

    "CSS+JQuery实现div翻转效果"是一个常见的交互设计技术,常用于按钮、卡片或登录表单等元素,以增加视觉吸引力和交互性。这个技术结合了层叠样式表(CSS)的3D变换和JavaScript库JQuery的优势,下面我们将详细探讨...

    css按钮、div等元素的流光+边框+滑动+文字覆盖+聚焦效果+水波样式

    使用css实现多种特效 全部效果: 1.默认三种主题:确认、取消、警告,适用于以下所有特效 2.流光效果:流光背景、流光边框 3.边框效果:双旋转边框、单旋转边框、呼吸效果边框 4.滑动效果:反光滑动、箭头滑动、中央...

    JS+CSS3点击按钮3D翻转动画.zip

    &lt;div class="front"&gt;正面内容&lt;/div&gt; &lt;div class="back"&gt;反面内容&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; ``` 这里,`flip-button`是按钮的ID,用于JavaScript中选中此元素。`flip-container`是包含翻转元素的容器,`flipper`则是...

    css按钮、div等元素的流光+边框+滑动+文字覆盖+聚焦效果

    使用css实现多种特效 全部效果: 1.默认三种主题:确认、取消、警告,适用于以下所有特效 2.流光效果:流光背景、流光边框 3.边框效果:双旋转边框、单旋转边框、呼吸效果边框 4.滑动效果:反光滑动、箭头滑动、中央...

    前端课程设计-餐厅点餐系统(html+css+js).zip

    《前端课程设计:餐厅点餐系统(HTML+CSS+JS)》 在现代互联网应用中,前端技术扮演着至关重要的角色,特别是在构建交互性强、用户体验优秀的网页应用方面。本项目——"餐厅点餐系统",就是一个很好的实例,它充分...

    html+css+js 实现拍照预览上传图片功能

    总结来说,实现“html+css+js 实现拍照预览上传图片功能”主要涉及以下几个步骤: 1. 使用HTML创建文件输入控件,并设置好预览区域。 2. 使用CSS美化页面布局,确保预览区域正常显示。 3. 使用JavaScript监听文件...

    通过JS自动调整图片的大小以适应div的高和宽

    在网页设计中,图片的展示效果对于...总结起来,通过结合CSS和JavaScript,我们可以实现图片自动调整大小以适应div,并保持原始的长宽比。这不仅提高了页面的响应性,还能确保图片在各种屏幕尺寸下都有良好的显示效果。

    js效果:CSS实现超级炫酷的流光按钮效果;在网页中实现文字的一个一个出现

    &lt;div id="text"&gt;&lt;/div&gt; const text = 'Hello, World!'; let index = 0; function reveal() { if (index ) { document.getElementById('text').innerHTML += text.charAt(index); index++; setTimeout...

    css3实现的简单翻牌效果

    在CSS3中实现的简单翻牌效果是一种常见的网页动态效果,它可以用于制作各种互动式的卡片、游戏或信息展示。这个效果通常用在需要展现事物的两面性,比如正面和反面,或者隐藏和显示信息的场景。接下来,我们将详细...

    CSS实现反方向圆角的示例代码

    原理 父级元素 relative,子元素 absolute,然后通过top、...CSS样式 .wrapper-dashed{ position: relative; height: 1px; width: 100%; } /*虚线实现*/ .dashed { border-top: 1px dashed #cccccc; height: 1px;

    E000587鲜花水草花卉网站模板.zip

    本模板采用eyoucms1.0内核制作,原创设计、手工书写DIV+CSS,完美兼容IE7+、Firefox、Chrome、360浏览器等;主流浏览器;结构容易优化;多终端均可正常预览 演示站网址:https://demoall.yiyocms.com/587/ ...

    markdown-css-master.zip

    此外,由于这个项目仅依赖于CSS,因此它对性能的影响极小,且兼容性良好。 要使用Markdown CSS Master,你需要将解压后的文件部署到你的服务器或HTML文件中,并引用相应的CSS文件。然后,只需将你的Markdown内容放...

    一款很好的范文之家网站源码

    功能特点如下: 多频道管理,无限制频道克隆,支持频道二级域名绑定功能,文章内容自动分页; ... 用户管理,多用户管理分权限发布、管理软件信息;用户短信、收藏功能,会员在线充值,...6.全站div+css(官方美化版风格)

    用CSS做的图片滚动下拉效果

    例如,我们可以让图片向左移动,当到达边界时,再向反方向移动回到原点。 ```css .scroll-animation { animation-name: scroll; animation-duration: 10s; /* 动画持续时间,可根据需要调整 */ animation-...

    CSS3动态数字翻转切换动画特效.zip

    例如,每个数字可能被封装在`&lt;div&gt;`标签中,并通过类名如`.digit`进行区分。同时,为了实现动态切换,JavaScript(可能是压缩包内的"jiaoben19602.js")会被用来处理逻辑,如定时更新数字、触发动画和绑定事件监听器...

    css入门笔记

    当内容多,元素区域小的时候,会产生溢出的效果,默认都是纵向溢出 属性:overflow,overflow-x,overflow-y 取值: 1.visible 可见的,默认值,溢出可见 2.hidden 隐藏的,溢出的内容全部隐藏,不可见溢出 3....

Global site tag (gtag.js) - Google Analytics