`
uule
  • 浏览: 6359001 次
  • 性别: Icon_minigender_1
  • 来自: 一片神奇的土地
社区版块
存档分类
最新评论

‘我要评论’ CSS

    博客分类:
  • CSS
 
阅读更多

1、

 

<div class="st_pl_title">
	<a name="wypl"><span class="text">我要评论</span></a>
</div>

<div class="st_hf">
  <ul>
	<li class="edit">
		<textarea id="strContent" name="strContent" onkeyup="checkValueWord(this);" onmousedown="checkValueWord(this);"></textarea>
		<input type="hidden" id="lShowPicId" name="lShowPicId" value="64">
	</li>
	<li style="margin-left: 100px;margin-top:5px;"><span id="wordValueCheck">你还可以输入200个字</span></li>
	<li class="button"><input type="button" value="提交" onclick="sub()"></li>
  </ul>
</div>

 

CSS:

第一个DIV:

 

.st_pl_title {
	width: 700px;
	height: 40px;
	line-height: 40px;
	border-bottom: 1px solid #e2e2e2;  /*下方分割线*/
	margin-bottom: 20px;       /*与下个DIV的间距*/
	float: left;
}

a {
	outline: none;
	color: #333;
	text-decoration: none;
}

.st_pl_title span.text {
	color: #000;
	font-family: "microsoft Yahei";
	font-size: 18px;
	float: left;   /*不float ,‘我要评论’会在中间*/
}

 

 

第二个DIV:

 

.st_hf {
	width: 700px;
	padding-bottom: 30px;
	float: left;
	min-height: 50px;
}

.st_hf ul {
	list-style: none;
	padding: 0;
	margin: 0;
}


.st_hf li {
	text-align: left;
}
ul, li {
	padding: 0px;
	margin: 0px;
	list-style-type: none;
	display: list-item;
}


.st_hf li.edit textarea {
	width: 490px;
	height: 90px;
	border: 1px solid #CCC;
	margin-left: 100px;    /*左侧空白*/
	padding: 5px;
	font-family: "microsoft Yahei";
	font-size: 12px;
	line-height: 22px;
}


.st_hf li.button input {
	margin-left: 100px;
	width: 105px;
	height: 32px;
	line-height: 32px;
	font-family: "microsoft Yahei";
	font-size: 15px;
	background: url(../image/shaitu/button_bg2.jpg) top no-repeat;
	color: #FFF;
	border: 0;
	cursor: pointer;
	margin-top: 20px;
}

 

 

效果:


 


 

 

 

 

 

 

  • 大小: 11.2 KB
  • 大小: 9 KB
分享到:
评论

相关推荐

    css星级评论美化代码下载

    首先,我们要理解星级评论系统的基本结构。通常,它由一系列的星形图标组成,用户可以对内容进行评分,这些星星会根据所选的评分点亮。在HTML中,我们可以使用`&lt;span&gt;`或`&lt;i&gt;`标签来创建每个星星图标,并通过CSS对其...

    UI留言评论css3样式.rar

    【UI留言评论css3样式.rar】是一个包含CSS3样式的资源包,主要用于实现美观的UI留言评论功能。在网页设计中,用户界面(UI)的评论区是网站或应用与用户交互的重要部分,它需要吸引人且易于使用。CSS3(层叠样式表第...

    利用HTML、CSS 实现带表情的评论框的制作教程

    CSS代码中使用了包括宽度、高度、边框、圆角、过渡效果等属性,以确保评论框在用户交互时能够有平滑的视觉效果。例如,使用transition属性为文本框和边框添加动画效果,让用户体验更加流畅。而RGBA颜色的使用则可以...

    CSS列表样式设计

    在网页设计中,CSS(Cascading Style Sheets)起着至关重要的作用,它允许我们对网页元素进行细致的样式控制,使页面布局更加美观、易读。本篇将重点讲解如何利用CSS进行列表样式的定制,让您的网页列表更具吸引力。...

    css模板 css div模板

    2. **书.rar** - 设计用于在线书店,展示书籍信息、作者简介,以及评论和评分系统。 3. **饰品.rar** - 适合珠宝或时尚饰品销售网站,可能包含高质感的图片展示和过滤选项。 4. **汽车配件.rar** - 为汽车配件商店...

    UI留言评论css3样式.zip

    【UI留言评论css3样式.zip】这个压缩包文件聚焦于前端开发中的用户界面(UI)设计,特别是关于留言和评论部分的CSS3样式应用。在这个项目中,开发者使用了HTML5、jQuery、JavaScript以及CSS技术来创建交互式且美观的...

    可视化的CSS编辑器,所见即所得。

    7. **协作功能**:对于团队项目,编辑器可能会提供协作工具,让团队成员可以同时编辑和评论CSS代码,提高协同效率。 8. **错误检测**:通过实时的错误提示,帮助用户避免常见的CSS语法错误,提升代码质量。 市面上...

    纯CSS绘制星星评分特效.zip

    这个特效是一种常见的交互元素,常用于网站评论、产品评分等场景,让用户能够直观地表达对某个事物的满意度。通过纯CSS实现,我们可以避免使用JavaScript或者图片,使得代码更加简洁、高效。 首先,我们需要了解CSS...

    css 网页全套模板

    5. **CSS头像框**:头像框 avatar 是用户个人形象的展示,常用于评论、社交网络等场景。通过CSS,我们可以设定头像的大小、圆角、边框和阴影,以及与其他元素的间距,使其在页面上和谐统一。 6. **DataTables插件**...

    html+css网站模板(首页,新闻页面,新闻内容页,留言)

    这个页面通常包括标题、日期、作者信息、正文和可能的评论区。HTML中,新闻正文可能由多个`&lt;p&gt;`标签和`&lt;img&gt;`(图片)标签组成,CSS则负责排版,如段落间距、图片浮动和文字对齐。 留言功能:留言功能允许用户在...

    CSS SECRETS BETTER SOLUTIONS TO EVERYDAY WEB DESIGN PROBLEMS

    评论家们一致认为,即使读者自认为已经对CSS了如指掌,这本书中仍有许许多多的秘密等待着被发现和揭示。 书中提供的不仅仅是那些令人称奇的CSS技巧,还包括了聪明的实践方法和一些绝妙的智慧。这些内容不仅仅是为...

    个人博客div+css可以作为作业交的

    4. 内容区域:使用Div划分文章、图片、评论等模块,通过CSS设置间距、对齐方式以及边框。 5. 侧边栏:可包含最新文章、热门文章、分类链接等,通过CSS调整其宽度和位置。 6. 底部信息:包括版权信息、社交网络链接...

    CSS样式论坛实例

    本主题将深入探讨"CSS样式论坛实例",并围绕“CSS样式”、“论坛”和“实例”这三个标签进行详尽的讲解。 首先,让我们理解CSS样式。CSS通过定义颜色、字体、布局、动画等视觉属性来控制元素的显示方式。它可以应用...

    布纹背景CSS创意模板

    这些模板可能会用到CSS来实现诸如文章标题样式、评论区设计等功能。 总之,“布纹背景CSS创意模板”是一种结合了布纹纹理和CSS技术的网页设计概念,通过巧妙运用CSS背景属性和模板化思想,为网页带来了独特的视觉...

    JSP SSH DIV CSS 简单论坛

    在CSS的帮助下,开发者可以轻松地对网页进行布局和设计,实现响应式或自适应网页。DIV元素配合CSS的浮动、定位和盒模型属性,可以实现灵活多样的网页结构。 **CSS(Cascading Style Sheets)** 是样式表语言,用于...

    个人博客html+css+JavaScript完整代码

    5. **动态加载和隐藏内容**:如评论系统,可以按需加载和显示评论。 6. **响应式设计辅助**:通过检测窗口大小变化,调整布局或内容。 7. **时间戳动态更新**:文章的发表时间可以实时显示为距离现在的时间。 个人...

    CSS星级图标(全套)

    这些图标可能是用于评分系统、评论反馈或展示产品评价的常见元素。 CSS星级图标的设计通常涉及伪类和相对单位,如百分比或em,以实现动态的半星或全星效果。下面我们将深入探讨一些关键的CSS概念和技术,这些都是...

    javaweb留言板css

    javaweb 留言板css代码,学习时候上课时候,是需要用到的必要代码

    HTML模板、DIV+CSS模板、个人博客模板、DIV模板、CSS模板

    3. **个人博客模板**:个人博客模板是特别为个人博客设计的HTML和CSS组合,通常包含博主个人信息、文章列表、评论区等功能。这些模板注重个性化和用户体验,以简洁、安静和清爽的设计吸引读者。描述中的“简单、安静...

Global site tag (gtag.js) - Google Analytics