0
我需要關於如何處理需要格式化html頁面的任務的建議。 可以說我有一個圖像作爲一個圓圈,我需要在它周圍放置7個單選按鈕。 理論上可以通過使用開發對象來實現它,但在我看來,這樣做很複雜。有沒有其他方式可以在圓周放置單選按鈕?razor Html.RadioButton position into image
任何幫助將不勝感激。
我需要關於如何處理需要格式化html頁面的任務的建議。 可以說我有一個圖像作爲一個圓圈,我需要在它周圍放置7個單選按鈕。 理論上可以通過使用開發對象來實現它,但在我看來,這樣做很複雜。有沒有其他方式可以在圓周放置單選按鈕?razor Html.RadioButton position into image
任何幫助將不勝感激。
https://jsfiddle.net/Le4nz2L5/
<!DOCTYPE html>
<html>
<head>
<style class="cp-pen-styles">
html,
body {
width: 100%;
height: 100%;
}
body {
position: relative;
background-color: #ddd;
overflow: hidden;
}
.main,
.container {
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
border-radius: 50%;
}
.main {
background-color: #B81365;
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.35);
cursor: pointer;
z-index: 50;
}
.main .title {
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 80px;
font-size: 3em;
line-height: 80px;
text-align: center;
color: #fafafa;
}
.container {
z-index: 10;
}
.plate {
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width:13px;
height:13px;
text-align:center;
}
.main + .container .plate:nth-of-type(1) {
top: -180%;
}
.container .plate:nth-of-type(2) {
top: -130%;
right: -120%;
}
.container .plate:nth-of-type(3) {
right: -170%;
}
.container .plate:nth-of-type(4) {
right: -120%;
bottom: -130%;
}
.container .plate:nth-of-type(5) {
bottom: -180%;
}
.container .plate:nth-of-type(6) {
bottom: -130%;
left: -140%;
}
.container .plate:nth-of-type(7) {
left: -190%;
}
.container .plate:nth-of-type(8) {
top: -130%;
left: -140%;
}
</style></head><body>
<center>
based on:<a href="http://codepen.io/Oka/pen/BNjwNz">Colin Hall-Coates codepen</a>
</center>
<label class='main' for='check'>
<div class='title'>
<i class='fa fa-bars'></i>
</div>
</label>
<div class='container'>
<a class='plate' href='#'>
<input type="radio"></input>
</a>
<a class='plate' href='#'>
<input type="radio"></input>
</a>
<a class='plate' href='#'>
<input type="radio"></input>
</a>
<a class='plate' href='#'>
<input type="radio"></input>
</a>
<a class='plate' href='#'>
<input type="radio"></input>
</a>
<a class='plate' href='#'>
<input type="radio"></input>
</a>
<a class='plate' href='#'>
<input type="radio"></input>
</a>
<a class='plate' href='#'>
<input type="radio"></input>
</a>
</div>
</body></html>
非常感謝你。這正是我期待的。 – yrluc