1
私のコードであなたの専門家の助けが必要です！ 私はWeb開発を学び始めましたが、今は自分のプロジェクトに問題があります。リスト内のテキストとLESSとの位置合わせとレイヤーの最適化
ウェブページのレイヤーの操作方法がわかりません。アダプティブサイトを作成したい場合は、ブラウザのサイズ変更ウィンドウでレイヤーが重複しています。ピンを適切な形でより適応させるにはどうすればいいですか？
メニュー内のリスト内のオブジェクト（コード内 - > div-user;数値付き円）（LINK TO PIN）？
@import 'https://fonts.googleapis.com/css?family=Open+Sans';
@green: #2ECC71;
@white: #E4F1FE;
body {
margin: 0;
}
.header {
position: fixed;
width: 100%;
height: 90px;
background-color: @green;
}
.user {
margin: 0;
position: absolute;
display: flex;
width: auto;
top: 5%;
left: 10%;
.name {
position: relative;
display: flex;
left: 25px;
top: 25px;
color: @white;
font-family: 'Open Sans', sans-serif;
}
ul {
margin: 0;
position: relative;
display: flex;
left: 10px;
align-items: center;
}
li {
position: relative;
list-style: none;
display: inline;
justify-content: center;
width: 60px;
height: 60px;
border-radius: 50%;
margin: 0px 15px 0px 0px;
background-color: darken(@green, 2%);
}
}
.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
}
.menu {
position: relative;
top: 20px;
display: flex;
justify-content: center;
margin: 0;
li {
list-style: none;
}
a {
font-family: 'Open Sans', sans-serif;
text-decoration: none;
width: 100px;
display: flex;
justify-content: center;
padding: 15px 15px 15px 15px;
background-color: darken(@green, 2%);
border-radius: 100px;
margin: 0px 5px 0px 5px;
color: @white;
&:hover {
background-color: lighten(@green, 10%);
border-bottom: 2px solid lighten(@green, 25%);
}
&:active {
border-bottom: 2px solid lighten(@green, 25%);
}
}
}<html>
<body>
<div class="header">
<div class="user">
<img class="avatar"
src="http://lorempixel.com/200/200/cats/">
<p class="user name">UserName</p>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<ul class="menu">
<li><a href="#">Contact</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Media</a></li>
</ul>
</div>
ご意見ありがとうございます！やってみる。 – salamanrMan