⑴ 如何用css畫出一個圓圈，裡面有個對號
.box {
width: 150px;
height: 150px;
margin: 100px auto;
border-radius : 5e%;
border: 5px solid #o0000e;
display: flex;
justify-content: center;
align-items : center;
}
.box: : before {
content: "";
display: block;
width: 88px;
height: 5epx;
border: 20px solid #ee000e;
border-right: none;
border-top: none;
transform: rotate(-45deg) translate(7px，-10px);
}
⑵ 用css樣式中的定位做出圖中盒子的效果
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>RunJS演示代碼</title>
<style>
*{
margin:0;
padding:0;
border:0;
}
body{
background-color:brown;
}
.wrap{
margin:auto;
border:5pxsolidwhite;
margin-top:10px;
width:300px;
height:300px;
}
.wrapdiv{
width:150px;
height:150px;
border:1pxsolidwhite;
background-color:gray;
position:relative;
}
.one{
z-index:3;
}
.three{
left:150px;
top:-304px;
}
div.four{
width:225px;
height:225px;
background-color:yellow;
z-index:2;
position:relative;
left:37px;
top:-572px;
}
div.five{
width:175px;
height:175px;
background-color:orange;
z-index:3;
position:relative;
left:63px;
top:-775px;
}
</style>
</head>
<body>
<divclass="wrap">
<divclass="one">
</div>
<divclass="two">
</div>
<divclass="three">
</div>
<divclass="three">
</div>
<divclass="four">
</div>
<divclass="five"></div>
</div>
</body>
</html>
⑶ 在css中怎樣設置能保證盒子繪制出來是正方形
首先，把寬和高設為同樣的固定值，則肯定是正方形，這個不用多說；
其次，如果是自適應的界面，需要用百分比來設置正方形的邊長，則可以用css3的新增長度單位vw、vh來設置，1vw等於視口寬度（viewportwidth）的百分之一，也就是說100vw就是視口的寬度。同理，1vh等於視口高度（viewportheight）的百分之一。比如下面這個正方形的邊長是屏幕寬度的50%：
<divstyle="width:50vw;height:50vw;background-color:#888"></div>
但是，這個方法要求瀏覽器支持css3，一些老的瀏覽器可能就不支持了。
⑷ CSS+DIV如何新建一個盒子
<html>
<head>
<title>無標題文檔</title>
<style type="text/css">
.box{ width:500px; height:500px; border:1px solid #F00;}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
這就是一個簡單的div盒子，盒子就是所謂的一個個div，N個DIV組成的就是HTML網頁。具體的你需要看一些相關書籍學習一下。
⑸ 怎麼用css畫出來一個菱形
.lxp {
width: 30px;
height: 30px;
transform: rotateX(45deg);
}
.lx {
width: 20px;
height: 20px;
background: green;
transform: rotate(45deg);
}
<div class="lxp">
<div class="lx"></div>
</div>
這才叫菱形好吧 具體什麼形狀調角度和長寬
⑹ CSS如何給圖片添加點擊顯示一個DIV盒子的效果
首先定位div盒子的位子，然後display:none隱藏起來，然後圖片調用onclik方法，即在img標簽上寫<img onclick="$('.div').show();">這樣就可以了。
注意:$(".div")中間的.div就是你要出現的那個盒子，選擇他的class，或者給他個id，表示選擇TA。
⑺ 這個用css盒模型怎麼實現
這個很簡單啊，先一個大的盒子，裡面寫三個盒子，兩個橫的，最後一個先旋轉90度，然後再定位到水平居中，大概思路就是這樣的。
⑻ 如何使用CSS畫一個空心長方形 要代碼哦，是使用DIV+CSS
垂直線還不簡單么，給一個層定義一個邊框樣式。右邊框或者左邊框，然後給顏色跟線條的粗細樣式即可
⑼ 如何用css3畫一個有邊框的三角形
如果是一個正方形，我們寫邊時，會用到border，但我們這里討論的三角形本身就是border，不可能再給border添加border屬性，所以我們需要用到其他辦法。
最容易想到的，是疊加層。思路是將兩個三角形疊加在一起，外層三角形稍大一些，顏色設置成邊框所需的顏色；內層三角形絕對定位在裡面。整體就能形成帶邊框三角形的假象。
這里就涉及到一個絕對定位的問題，上、下、左、右四種方向的三角形相對於父級定位是不同的。首先我們來看下，當定位都為0（left:0px; top:0px;）時，會發生什麼。
HTML：
<!-- 向上的三角形 -->
<div class="triangle_border_up">
<span></span>
</div>
<!-- 向下的三角形 -->
<div class="triangle_border_down">
<span></span>
</div>
<!-- 向左的三角形 -->
<div class="triangle_border_left">
<span></span>
</div>
<!-- 向右的三角形 -->
<div class="triangle_border_right">
<span></span>
</div>
CSS:
/*向上*/
.triangle_border_up{
width:0;
height:0;
border-width:0 30px 30px;
border-style:solid;
border-color:transparent transparent #333;/*透明 透明 灰*/
margin:40px auto;
position:relative;
}
.triangle_border_up span{
display:block;
width:0;
height:0;
border-width:0 28px 28px;
border-style:solid;
border-color:transparent transparent #fc0;/*透明 透明 黃*/
position:absolute;
top:0px;
left:0px;
}
/*向下*/
.triangle_border_down{
width:0;
height:0;
border-width:30px 30px 0;
border-style:solid;
border-color:#333 transparent transparent;/*灰 透明 透明 */
margin:40px auto;
position:relative;
}
.triangle_border_down span{
display:block;
width:0;
height:0;
border-width:28px 28px 0;
border-style:solid;
border-color:#fc0 transparent transparent;/*黃 透明 透明 */
position:absolute;
top:0px;
left:0px;
}
/*向左*/
.triangle_border_left{
width:0;
height:0;
border-width:30px 30px 30px 0;
border-style:solid;
border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */
margin:40px auto;
position:relative;
}
.triangle_border_left span{
display:block;
width:0;
height:0;
border-width:28px 28px 28px 0;
border-style:solid;
border-color:transparent #fc0 transparent transparent;/*透明 黃 透明 透明 */
position:absolute;
top:0px;
left:0px;
}
/*向右*/
.triangle_border_right{
width:0;
height:0;
border-width:30px 0 30px 30px;
border-style:solid;
border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/
margin:40px auto;
position:relative;
}
.triangle_border_right span{
display:block;
width:0;
height:0;
border-width:28px 0 28px 28px;
border-style:solid;
border-color:transparent transparent transparent #fc0;/*透明 透明 透明 黃*/
position:absolute;
top:0px;
left:0px;
}
效果如圖：
為什麼不是我們預想的如下圖的樣子呢
原因是，我們看到的三角形是邊，而不是真的具有內容的區域，請回憶下CSS的盒子模型的內容。
絕對定位（position:absolute），是根據相對定位父層內容的邊界計算的。
再結合上篇我們最開始寫的寬高為0的空div:
這個空的div，content的位置在中心，所以內部三角形是根據中心這個點來定位的。
為了看清楚一些，我們使用上一次的方法，給span增加一個陰影：
1
box-shadow:0 0 2px rgba(0,0,0,1);
效果如圖：
這回我們明確的知道了，內部的三角形都是根據外部三角形實際內容的點來定位的，而非我們肉眼看到的三角形的邊界定位。
HTML不變，CSS：
/*向上*/
.triangle_border_up{
width:0;
height:0;
border-width:0 30px 30px;
border-style:solid;
border-color:transparent transparent #333;/*透明 透明 灰*/
margin:40px auto;
position:relative;
}
.triangle_border_up span{
display:block;
width:0;
height:0;
border-width:0 28px 28px;
border-style:solid;
border-color:transparent transparent #fc0;/*透明 透明 黃*/
position:absolute;
top:1px;
left:-28px;
}
/*向下*/
.triangle_border_down{
width:0;
height:0;
border-width:30px 30px 0;
border-style:solid;
border-color:#333 transparent transparent;/*灰 透明 透明 */
margin:40px auto;
position:relative;
}
.triangle_border_down span{
display:block;
width:0;
height:0;
border-width:28px 28px 0;
border-style:solid;
border-color:#fc0 transparent transparent;/*黃 透明 透明 */
position:absolute;
top:-29px;
left:-28px;
}
/*向左*/
.triangle_border_left{
width:0;
height:0;
border-width:30px 30px 30px 0;
border-style:solid;
border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */
margin:40px auto;
position:relative;
}
.triangle_border_left span{
display:block;
width:0;
height:0;
border-width:28px 28px 28px 0;
border-style:solid;
border-color:transparent #fc0 transparent transparent;/*透明 黃 透明 透明 */
position:absolute;
top:-28px;
left:1px;
}
/*向右*/
.triangle_border_right{
width:0;
height:0;
border-width:30px 0 30px 30px;
border-style:solid;
border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/
margin:40px auto;
position:relative;
}
.triangle_border_right span{
display:block;
width:0;
height:0;
border-width:28px 0 28px 28px;
border-style:solid;
border-color:transparent transparent transparent #fc0;/*透明 透明 透明 黃*/
position:absolute;
top:-28px;
left:-29px;
效果如圖：
進一步來寫氣泡框的三角形，如圖所示：
HTML：
<div class="test_triangle_border">
<a href="#">三角形</a>
<div class="popup">
<span><em></em></span>純CSS寫帶邊框的三角形
</div>
</div>
CSS：
.test_triangle_border{
width:200px;
margin:0 auto 20px;
position:relative;
}
.test_triangle_border a{
color:#333;
font-weight:bold;
text-decoration:none;
}
.test_triangle_border .popup{
width:100px;
background:#fc0;
padding:10px 20px;
color:#333;
border-radius:4px;
position:absolute;
top:30px;
left:30px;
border:1px solid #333;
}
.test_triangle_border .popup span{
display:block;
width:0;
height:0;
border-width:0 10px 10px;
border-style:solid;
border-color:transparent transparent #333;
position:absolute;
top:-10px;
left:50%;/* 三角形居中顯示 */
margin-left:-10px;/* 三角形居中顯示 */
}
.test_triangle_border .popup em{
display:block;
width:0;
height:0;
border-width:0 10px 10px;
border-style:solid;
border-color:transparent transparent #fc0;
position:absolute;
top:1px;
left:-10px;
}
(2)東北、東南、西北、西南三角形的寫法
繼續，來寫西北方（↖），東北方（↗），西南方（↙），東南方（↘）的三角形。
原理如圖：
根據顏色的劃分，每個可以有兩種CSS來寫，分別利用不同的邊來創造所需三角形。
寫一個nw（↖）的例子：
HTML：
1
<div class="triangle_border_nw"></div>
CSS(1)：
.triangle_border_nw{
width:0;
height:0;
border-width:30px 30px 0 0;
border-style:solid;
border-color:#6c6 transparent transparent transparent;
margin:40px auto;
position:relative;
}
CSS(2)：
.triangle_border_nw{
width:0;
height:0;
border-width:0 0 30px 30px;
border-style:solid;
border-color:transparent transparent transparent #6c6;
margin:40px auto;
position:relative;
}
兩種CSS效果均如圖所示：
以上是利用CSS寫三角形，晉級到
(1)有邊框的三角形
(2)東北、東南、西北、西南三角形的寫法
⑽ CSS+DIV寫盒子模型圖
網頁盒子模型存在兩種：
1：標准W3C盒子模型； 2：IE盒子模型（IE瀏覽器默認的模型）。
在兩種不同模型網頁里，定義了相同CSS屬性的元素顯示效果是不一樣的，下面就用公式來區分這兩種不同的盒子模型。
1：標准W3C盒子模型
寬=width+(padding-left)+(padding-right)+(margin-left)+(margin-right)+(border-left)+(border-right)
高=height+(padding-top)+(padding-bottom)+(margin-top)+(margin-bottom)+(border-top)+(border-bottom)
2： IE盒子模型
寬=width+(border-left)+(border-right)
高=height+(border-top)+(border-bottom)
該模型是IE瀏覽器默認的盒子模型，當然也可以對其進行更改，在頁面最上方加如下代碼：
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">