div漂亮样式

最新推荐文章于 2023-01-07 16:49:18 发布
最新推荐文章于 2023-01-07 16:49:18 发布
阅读量2.3k 收藏
点赞数
分类专栏： 【javaEE】

效果演示


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
p {
   padding : 5px  10px ;
   margin : 10px ;
   background : #ff0030 ;
   color : #fff ;
   font-size : 21px ;
   line-height : 1.3em ;
   border : 2px  dashed  #fff ;
   border-radius: 3px ;
   -moz-border-radius: 3px ;
   -webkit-border-radius: 3px ;
   -moz-box-shadow: 0  0  0  4px  #ff0030 , 2px  1px  4px  4px  rgba( 10 , 10 , 0 ,. 5 );
   -webkit-box-shadow: 0  0  0  4px  #ff0030 , 2px  1px  4px  4px  rgba( 10 , 10 , 0 ,. 5 );
   box-shadow: 0  0  0  4px  #ff0030 , 2px  1px  6px  4px  rgba( 10 , 10 , 0 ,. 5 );
   text-shadow : -1px  -1px  #aa3030 ;
}

 

深呼吸000
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html把div变得好看,一些好看的css样式
weixin_39707597的博客
06-10 1144
.box1 {height: 25em;width: 20em;background: rgb(255, 128, 0);background: -moz-linear-gradient(0deg, yellow, red);background: -o-linear-gradient(0deg, yellow, red);background: -webkit-linear-gradient(0...
CSS写的各种好看的层颜色
03-10 821
      web2.0 color  type="text/css">  body{ margin:20px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:12px;
漂亮的div弹出窗口样式
10-29
一个漂亮的div弹出窗口样式 解压后双击html页面即可
几种常见的DIV边框样式
09-24 1507
<br />head><br /><body><br />  <p style=border-style:none>无边框</p><br />  <p style=border-style:dotted>点线式边框</p><br />  <p style=border-style:dashed>破折线式边框</p><br />  <p style=border-style:solid>直线式边框</p><br />  <p style=border-style:double>双线式边框</p><br /> 
利用div+css实现几种经典布局的详解，样式以及代码！
热门推荐
kongkongyou的博客
01-15 5万+
一、左右两侧，左侧固定宽度200px，右侧自适应占满 html代码 css代码 *{ margin: 0px; padding: 0px; } .divBox{ height: 500px; background: yellow; } .left{ float: left; width: 200px;
DIV+CSS漂亮的样式
08-12
几款不错的DIV+CSS样式 里面有3D按钮 层模拟窗口移动
漂亮的div浮动层
03-07
漂亮的div浮动层
漂亮的div弹框
10-31
解压到项目中就可以用！可以根据自己的需求修改js文件来改变弹窗的样式或功能！
CSS3+DIV实现漂亮的动画彩色标签
09-27
通过这种方式，当用户将鼠标移动到不同的标签上时，标签的背景色、圆角和文字阴影会发生平滑过渡，呈现出漂亮的动画效果。这种技术不仅提高了用户体验，还能使网站看起来更加现代化和专业。 总的来说，这个例子展示...
通过div+css做出好看的横排导航栏
u014340533的专栏
12-18 1万+
第一次写博客，希望大家支持，如果有什么不严谨或者写错的地方，望大家批评矫正。希望论坛大牛多指点，菜鸟一只，最近在学前端布局，因为自己刚学会的，所以分享出来给大家，希望对像我一样的菜鸟有所帮助！ 1.首先写好基本的HTML代码，这个就不必多加解释了，代码如下： 无标题文档 标题1 标题2 标题3 子标题1 子标题2 标题4 标
很酷的DIV抽屉效果
01-04
很酷的DIV抽屉效果，有点像OutLook自动伸缩
漂亮的div弹窗
09-27
绝对实用 有demo 包括了5种可以利用的弹窗效果。简单易懂
好看的html中的输入框,div+css助你实现漂亮的input
weixin_30569923的博客
06-04 3624
前言在很多web或者app页面中，我们可以看到各种各样的输入框，从外观上看它们可以直观的看做是input元素，但是实际上并非如此。我们可以通过别的标签去模拟input标签的效果，今天我们就来看看如何使用div标签模拟input标签的效果。div+css页面效果这里我们用ofo的主页面作为例子，在点击下面数字的时候，数字的内容会出现在输入框内，这个输入框就是用div模拟实现的。当然页面内容是静态的，...
CSS那些超好用的样式
前端学习笔记
01-07 1332
和三角形原理相同，但是需要设置宽度或者高度其中之一，边框依然只保留其中一个颜色，其余皆设置为透明，但两边要比保留的那一边要小。元素本身没有画三角形的样式，但是边框两边是斜角，所以只要把元素宽高设为0，再把边框设成透明，保留其中一个边框即可。以tab栏下划线举例。
几款炫酷的CSS代码样式
冰强的博客
06-02 3648
1.Neumorphism.io2.透明玻璃态生成器3.盒子阴影4.CSS 发光5.渐变颜色按钮6.3D旋转木马7.CSS 发光图标
制作好看又非常简单CSS样式的颜色块
qq_28499043的博客
08-25 1万+
在这里我将我最近学到的CSS样式的渐变颜色块记录下来
如何实现在div上做出凸出效果。。。的导航栏。
Aidiying的博客
01-11 6155
在div上实现凸出效果，如图： 代码  css： *{margin: 0; padding: 0;} .clickA{ position: relative; display: inline-block; *display: inline; *zoom: 1; width: 100px; height: 1...
用css＋div制作网页
最新发布
09-16
### 回答1： 首先，我们需要了解什么是CSS和DIV。CSS是层叠样式表，是一种样式语言，用于描述HTML或XML文档的呈现。DIV是HTML中的一个标签，用于定义文档中的一个区域或块。 下面是一个简单的网页示例，使用CSS和DIV进行布局和样式设置。 ``` <!DOCTYPE html> <html> <head> <title>My Webpage</title> <style type="text/css"> body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; } header { background-color: #008080; color: #fff; padding: 20px; text-align: center; } nav { background-color: #444; color: #fff; padding: 10px; text-align: center; } nav ul { list-style: none; margin: 0; padding: 0; } nav ul li { display: inline-block; margin: 0 10px; } nav ul li a { color: #fff; text-decoration: none; padding: 5px 10px; border-radius: 5px; background-color: #008080; } section { padding: 20px; margin: 10px; background-color: #fff; box-shadow: 0 0 5px #aaa; } footer { background-color: #444; color: #fff; padding: 10px; text-align: center; } </style> </head> <body> <header> <h1>My Webpage</h1> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <section> <h2>Welcome to my webpage!</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod nisi eget neque fermentum, ac sagittis nunc aliquet. </p> </section> <footer> <p>Copyright © 2021 My Webpage</p> </footer> </body> </html> ``` 在这个示例中，我们使用了CSS来设置整个网页的样式，包括字体、背景色、边距、内边距等。利用DIV标签，我们将整个网页分为了头部(header)、导航栏(nav)、内容(section)和底部(footer)四个区域，并分别设置了它们的样式。 当然，这只是一个简单示例，实际网页的布局和样式设置可能更加复杂。但是，掌握了CSS和DIV的基本用法，我们就可以通过不断练习和实践，来制作出更加漂亮、实用的网页。 ### 回答2： 使用CSS和DIV来构建网页是一种常见和常用的方法。CSS（层叠样式表）用于控制网页的样式和布局，而DIV（‘division’的缩写，即‘区块’）则用于将网页分割成不同的块状区域。 首先，通过HTML创建网页的基本结构，然后使用DIV元素来划分不同的区域。例如，可以使用一个主DIV作为整个页面的容器，然后在主DIV内部再嵌套其他的DIV，分别来表示页眉、导航栏、内容区域和页脚等。通过设置DIV的样式属性，可以控制它们的大小、位置、边距、背景颜色和文本样式等。 接下来，使用CSS来定义这些DIV的样式。可以通过CSS选择器来选中具体的DIV元素，然后对它们应用样式。例如，可以使用类选择器（class selector）来为特定的DIV指定样式，也可以使用ID选择器来为唯一的DIV元素添加样式。 在CSS中，还可以使用盒模型来控制DIV的大小和边距。通过设置width（宽度）、height（高度）、margin（外边距）、padding（内边距）等属性，可以实现对DIV的精确控制。 此外，还可以使用CSS的浮动（float）属性来实现页面的多列布局。通过将DIV浮动到指定的方向（左或右），可以使其他DIV元素环绕在其周围。 最后，还可以使用CSS的伪类（pseudo-class）和伪元素（pseudo-element）来实现更多的效果，如悬停态、链接样式和内容插入等。 总之，使用CSS和DIV制作网页可以实现丰富多样的页面布局和样式效果。通过调整和组合不同的CSS属性和选择器，可以轻松地实现个性化的网页设计。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值