当前位置:首页 > 前端技术 > css系列-看过之后让我~~~

css系列-看过之后让我~~~

2022年09月16日 16:31:25前端技术4

昨天,lwh给我一个css的demo,让我看,刚开始看了之后,不屑,不就是一个js特效吗,但他给我说是纯粹的css样式,我吃了一惊,其中的内涵,还是请网友体会啊!,我就先把他给我的一个demo,给大家贴出来了..(难道真的是我功夫不到家,悲哀~~~~~~~~~)

转载请注明 小贺, 小贺的博儿

< style >
body
{
margin
: 0 ;
padding
: 0 ;  
font-size
: 12px ;  
line-height
: 1.7 ;
font-family
: Verdana, "宋体" ;  
overflow
: hidden ;
 
}
#info
{  
width
: 600px ;
background
:  #666666 ;
margin-left
: auto ;
margin-right
: auto ;
text-align
: center ;  
border
: 1px solid #FFFFFF ;
height
: 400px ;
margin-top
: 20px ; }
h1
{
margin
: 20px 0 0 0 ;
color
: #CC0000 ;
font-size
: 24px ;
color
: #FFF ;
}
ul,li
{  
list-style
: none ;
margin
: 0 ;
padding
: 0 ;
}
a:active,a:hover
{
cursor
: pointer
}
#info #zs img
{  
width
: 400px ;
height
: 280px ;
border
: 1px solid #FFF ;
}
#zs
{
height
: 360px ;
overflow
:  hidden ;  
text-align
: left ;  
float
: left ;  
width
: 450px ;
margin-top
: 20px
}
#zs ul
{
margin
: 0 0 0 30px ;
}
#zs span
{
display
: block
}
#zs a
{
display
: inline
}
#nav
{  
padding-right
: 10px ;
width
: 135px ;
height
: 350px ;  
overflow
: auto ;  
padding
: 0 ;
text-align
: left ;  
float
: left ;
}
#nav a
{  
display
: block
}
.z
{  
width
: 80px ;
height
: 56px ;
display
: block ;
border
: 1px solid #FFFFFF ;
margin
: 4px 0 4px 25px ;
color
: #FFF
}
.b1
{  background : url(a1.jpg) }
.b2
{  background : url(a2.jpg) }
.b3
{  background : url(a3.jpg) }
.b4
{  background : url(a4.jpg) }
.b5
{  background : url(a5.jpg) }
#zs li
{  display : block ;  height : 400px ; }
</ style >
< div  id ="info" >
< h1 >42342314 </ h1 >
< div  id ="zs" >
< ul >
< li >
< name ="z1"  id ="z1" ></ a >< img  src ="a1.jpg"  alt ="照片1"   />< br  /> 照片1
< span >< href ="#"  target ="_blank" > 34214324432 </ a ></ span >
</ li >
< li >
< name ="z2"  id ="z2" ></ a >< img  src ="a2.jpg"  alt ="照片2"   />< br  /> 照片2
< span >< href ="#"  target ="_blank" > 431234 </ a ></ span >
</ li >
< li >
< name ="z3"  id ="z3" ></ a >< img  src ="a3.jpg"  alt ="照片3"   />< br  /> 照片3
< span >< href ="#"  target ="_blank" > www.865171.cn </ a ></ span >
</ li >
< li >
< name ="z4"  id ="z4" ></ a >< img  src ="a4.jpg"  alt ="照片4"   />< br  /> 照片4
< span >< href ="#"  target ="_blank" > 2341414 </ a ></ span >
</ li >
< li >
< name ="z5"  id ="z5" ></ a >< img  src ="a5.jpg"  alt ="照片5"   />< br  /> 照片5
< span >< href ="#"  target ="_blank" > 432141234213 </ a ></ span >
</ li >
</ ul >
</ div >
< div  id ="nav" >
< href ="#z1"  class ="b1 z"  title ="照片1" ></ a >
< href ="#z2"  class ="b2 z"  title ="照片2" ></ a >
< href ="#z3"  class ="b3 z"  title ="照片3" ></ a >
< href ="#z4"  class ="b4 z"  title ="照片4" ></ a >
< href ="#z5"  class ="b5 z"  title ="照片5" ></ a >
</ div >
</ div >

 

 大家只需要把他存为 *.html,,运行即可,但是图片需要大家该下哦!

 转载请注明 小贺小贺的博儿

结果今天,我与lwh 交流了一下,,原来是这个原因 

 

这是我今天做的demo

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > 练习 </ title >
< style  type ="text/css" >
body 
{
    margin-right
:  auto ;
    margin-left
:  auto ;
    border-width
:  0px ;
}
ul,li
{
 list-style
: none ;     
}
#main 
{
    width
:  800px ;
    margin-right
:  auto ;
    margin-left
:  auto ;
}
#left 
{
    height
:  200px ;
    width
:  310px ;
    overflow
:  hidden ;
    float
:  left ;
    margin
:  20px ;
    display
:  inline ;
}
#left ul li 
{
    height
:  200px ;
    overflow
:  hidden ;
    margin-top
:  10px ;
    margin-bottom
:  10px ;
}
#right 
{
    float
:  left ;
    width
:  100px ;
    padding-top
:  25px ;
}
#right ul li 
{
    margin-top
:  5px ;
    margin-bottom
:  15px ;
}
img
{
 display
: block ;
 cursor
: pointer ;
 border-width
: 0px ;
}
</ style >
</ head >

< body >
< div  id ="main" >
    
< div  id ="left" >
        
< ul >
            
< li >< img  name ="#link1"  src ="banner.jpg"  alt ="01"  width ="300"  height ="200"    /></ li >
            
< li >< img  name ="#link2"  src ="hei_man.jpg"  alt ="02"  width ="300"  height ="200"    /></ li >
            
< li >< img  name ="#link3"  src ="phone_img.jpg"  alt ="03"  width ="300"  height ="200"    /></ li >
        
</ ul >
    
</ div >
    
< div  id ="right" >
        
< ul >
            
< li >< href ="#link1" >< img  src ="banner.jpg"  alt ="01"  width ="80"  height ="50"    /></ a ></ li >
            
< li >< href ="#link2" >< img  src ="hei_man.jpg"  alt ="02"  width ="80"  height ="50"    /></ a ></ li >
            
< li >< href ="#link3" >< img  src ="phone_img.jpg"  alt ="03"  width ="80"  height ="50"    /></ a ></ li >
        
</ ul >
    
</ div >
    
< div  style ="clear:both" ></ div >
</ div >
</ body >
</ html >

 

 我这个代码,相信各位一看就知道其中的内涵了吧!

作者:hevily
来源链接:https://www.cnblogs.com/NetSos/archive/2010/08/27/1810003.html

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/41909.html

标签: css
分享给朋友:

“css系列-看过之后让我~~~” 的相关文章

Html/Css

原文地址:http://blog.csdn.net/annip/article/details/53455226 一.什么是role属性 role属性作用是告诉Accessibility类应用(比如屏幕朗读程序,为盲人提供的访问网络的便利程...

HTML标签属性与CSS样式

HTML标签属性与CSS样式

HTML基础 定义:超文本标记语言 Hypetext Markup Language 特点: • 不需要编译,直接由浏览器执行 • 是一个文本文件 • 必须用htm或html作文件后缀 • 对大小写不敏感,HTML或html都可以 HT...

css去除html中a标签的默认样式

html中a标签的默认样式实在是太丑,这简直是对前端程序猿的一种蹂躏!!!所以通常情况下需要去除a标签的默认样式。 以下代码是在a标签的不同状态下去除默认的下划线,如果要修改颜色、字体等,在对应位置添加css样式即可。 /*去除a...

HTML&CSS实验(5)---学习颜色、字体、文本格式化和盒模型的样式定义

HTML&CSS实验(5)---学习颜色、字体、文本格式化和盒模型的样式定义

  【实验题目】HTML&CSS实验(5) 【实验目的】学习颜色、字体、文本格式化和盒模型的样式定义。                  ----------------------个人作业,如果有后辈的作业习题一致,可以参考学习,一起交流...

CSS:水平居中与垂直居中

CSS:水平居中与垂直居中

CSS居中算是一个比较基础的问题,在实际运用中,需要考虑到的一般是两种情况,一种是主要是表现为文字,图片等行内元素的居中,一种是指 div 等块级标签元素的居中。 水平居中 1、行内元素 行内元素(主要是表现为文字,图片等行内元素)...

css中*的用法

*是代表所有html中的标签 例.写了一个 *{box-sizing:border-box} .span-class{ width:80px; padding:20px; } 结果,span标签的内容宽度是80px,并不是40px...

css实现页面底部固定在屏幕最下方,内容占满屏后紧跟其后的两种方法

1.只针对底部高度固定的情况,不能解决底部高度不固定的情况, 原理:主要内容放在page-main里面,page-container最小高度100%(注意这里html,body高度也要设为100%),position为relative。footer的position为abs...

span标签垂直居中显示的正确方法

span标签居中显示的正确方法 方法一: <span style="text-align: center">水平居中</span> <span style="line-height:值为span的高度">垂直居中...

CSS 选取第几个标签元素

在前端开发中,我们可能会碰到这样的需求:想让列表中的第一个部分显示不同的样式 ,想让列表中的偶数部分显示不同的背景颜色,想让列表中的最后一部分样式不一样……这样的需求,我们怎样来实现?其实,如果前面文件是php开发的,可以通过php的循环语句+判断语句+css样式来实现。但是,如...

遇见未知的CSS

遇见未知的CSS

摘录自《CSS核心技术详解》 1.1 CSS中你可能会疑问的几个问题 1.1.1 在CSS中为什么要有层叠 在CSS中可能会有多个样式表同时影响同一个元素的某个属性,设计这个功能的主要原因有两个,解决模块化和作者、用户、用户代理样式冲突。 模块化...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。