教你用css3实现图片容器内等比缩放,教你用c3实现图片容器内等比缩放......
2023-03-16 296 CSS
DW制作简约的用户评分代码模板
来源：互联网
2023-03-16 19:17:35 292
点击分数的时候，颜色就会过到分数的那个格子那里
工具/原料
- Adobe Dreamweaver cs5
方法/步骤
打开Adobe Dreamweaver cs5新建一个空白网页。切换到代码页面：
在head>后面插入代码：
然后在/head>前面插入代码：
style type="text/css">
*{margin:0;padding:0; font-family:"微软雅黑"}
ul{ list-style:none;}
/*用户评分*/
.pingfenxitong{
padding:15px 0;
width:1200px;
margin:0 auto;
}
.pingfenList{
float:left;
width:500px;
padding-right:20px;
}
.pfxtTitle{
font-weight:bold;
font-size:1.2em;
padding:4px 0;
}
.pfxtText{
line-height:25px;
}
.pfxtFen{
margin:10px 0;
}
.pfxtFen li{
float:left;
width:98px;
height:30px;
text-align:center;
line-height:30px;
border:#ddd 1px solid;
background:#f1f1f1;
cursor:pointer;
}
.pfxtFen li.pfxtCur{
background:#308A95;
color:#fff;
border:#308A95 1px solid;
}
/style>
接着在body>后面插入代码：
!--用户评分代码-->
div class="pingfenxitong">
div class="pingfenList">
div class="pfxtTitle">功能：/div>
div class="pfxtText">你觉得这个创意在功能上优秀吗？/div>
ul class="pfxtFen" title="双击取消评分">
li>1/li>
li>2/li>
li>3/li>
li>4/li>
li>5/li>
div class="clearfix">/div>
/ul>!--pfxtMid/-->
div class="pfxtRight">/div>
div class="clearfix">/div>
/div>!--pingfenList/-->
需要多少个评分的内容就插入多少段上面第四步的代码。我这里的是四个内容：功能、外观、成本、难度。在这里的代码修改：
div class="pfxtTitle">功能：/div>
div class="pfxtText">你觉得这个创意在功能上优秀吗？
然后切换到设计页面查看是否写对了代码：
预览：
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
相关文章
- 详细阅读
-
怎么用div布局加css样式做网页详细阅读
怎么用div布局加css样式做网页,怎么做一个网页呢，静态页面的制作是很简单的，我们来看看怎么通过div布局 c样式来制作一个网页吧。......
2023-03-16 447 CSS
-
css基础教程：[1]为网页使用网络字体详细阅读
![css基础教程：[1]为网页使用网络字体](https://exp-picture.cdn.bcebos.com/cca2552c56ee7b7f34c65fc66ef4fcf5ef0d411f.jpg)
css基础教程：[1]为网页使用网络字体,本教程为大家介绍在网页上怎么使用网络字体。1，使用网络字体的好处是所有人看到的效果都是样的，效果统一，2，不依赖于用户电脑上是否安装了该字体。......
2023-03-16 293 CSS