利用html与css制作5星好评页面

2019-09-10 郑州网站建设  

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>五星评价</title>

    <style>

        @font-face {

            font-family: 'iconfont';  /* project id 247957 */

            src: url('//at.alicdn.com/t/font_wkv6intmx8cnxw29.eot');

            src: url('//at.alicdn.com/t/font_wkv6intmx8cnxw29.eot?#iefix') format('embedded-opentype'),

            url('//at.alicdn.com/t/font_wkv6intmx8cnxw29.woff') format('woff'),

            url('//at.alicdn.com/t/font_wkv6intmx8cnxw29.ttf') format('truetype'),

            url('//at.alicdn.com/t/font_wkv6intmx8cnxw29.svg#iconfont') format('svg');

        }

        .iconfont {

            font-family:"iconfont" !important;

            font-size:16px;

            font-style:normal;

            -webkit-font-smoothing: antialiased;

            -webkit-text-stroke-width: 0.2px;

            -moz-osx-font-smoothing: grayscale;

        }

        body{

            font-family: "microsoft yahei";

        }

        ul,li{

            list-style: none;

            padding:0;

            margin:0;

        }

        a{

            text-decoration: none;

        }

        .clearfix:after {

            content: ".";

            display: block;

            height: 0;

            clear: both;

            visibility: hidden;

        }

        .order-evaluation {

            width: 827px;

            border: 2px solid #E84E40;

            background: #fff;

            z-index: 200;

            margin:50px auto;

        }

        .order-evaluation{

            padding:22px;

        }

        .order-evaluation h4{

            font-size:18px;

            color:#333333;

            padding-bottom:20px;

            border-bottom:1px dashed #dbdbdb;

        }

        .order-evaluation p{

            font-size:14px;

            color:#999;

            line-height:45px;

            margin-bottom:0;

        }

        .order-evaluation .order-evaluation-text{

            font-size:16px;

            color:#333;

            line-height:40px;

            width:809px;

            padding-left:15px;

            background:#f3f3f3;

            margin-bottom:25px;

            margin-top:20px;

        }

        .order-evaluation-checkbox ul li{

            width:142px;

            height:43px;

            border:1px solid #e8e8e8;

            text-align: center;

            background: #fff;

            font-size:14px;

            color:#333333;

            line-height:43px;

            margin-right:25px;

            margin-bottom:25px;

            float:left;

            cursor: pointer;

            overflow: hidden;

            position:relative;

        }

        .order-evaluation-checkbox ul li.checked i{

            display: block;

        }

        .order-evaluation-checkbox ul li.checked{

            border:1px solid #e84c3d;

        }

        .order-evaluation .order-evaluation-textarea{

            position:relative;

            width: 784px;

            height: 210px;

        }

        .order-evaluation .order-evaluation-textarea textarea{

            width:793px;

            height:178px;

            border:1px solid #e8e8e8;

            position:absolute;

            top:0;

            left:0;

            line-height:22px;

            padding:15px;

            color:#666;

        }

        .order-evaluation .order-evaluation-textarea span{

            position:absolute;

            bottom:10px;

            font-size:12px;

            color:#999;

            right:10px;

        }

        .order-evaluation .order-evaluation-textarea span em{

            color:#e84c3d;

        }

        .order-evaluation>a{

            width:154px;

            height:48px;

            border-radius: 6px;

            display: block;

            text-align: center;

            line-height:48px;

            background:#f36a5a;

            float:right;

            margin-top:20px;

            color:#fff;

            font-size:14px;

        }

        .order-evaluation-checkbox ul li i {

            display: none;

            color: #e84c3d;

            position: absolute;

            right: -4px;

            bottom: -14px;

            font-size: 20px;

        }

        .order-evaluation>a:hover{

            background: #e84c3d;

        }

        .block li label,.con span{ font-size: 18px; margin-right: 20px; line-height: 23px;}

        .block li span{display: inline-block; vertical-align: middle; cursor: pointer;}

        .block li span img{margin-right: -5px; }

        .level{color:#e84c3d;font-size:16px;margin-left:15px;position: relative;top: 3px;}

        .dmlei_tishi_info{


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/seo/1819.html转载请标明出处,谢谢合作!
标签:
  • HTML
  • Doctype
  • !
  • htmlcss5
  • l