Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use html and css to make a 5-star high praise page, which has a certain reference value, and interested friends can refer to it. I hope you can learn a lot after reading this article.

Five-star evaluation

@ 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 h5 {

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 {

Height:70px;border-radius: 10pxposition background: rgba; font-size:18px;color:#fff;text-align: center;line-height: 70pxposition fixed

Left: 48%

Display: none

Margin-left:-128px

Top: 40%

Margin-top:-35px

Padding: 0 15px

Z-index: 1000

}

Evaluation of "News order"

Please take this evaluation seriously! Your comments are really very important to us!

What impression did touching your head leave you with this transaction?

High professional level 

Deliver just-in-time 

The effect is obvious 

Accurate  for data analysis

Capacity needs to be improved 

Time delay 

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.