index.css
* {
margin: 0;
padding: 0;
}
#wrap {
margin: 0 auto;
height: 100vh;
width: 380px;
display: flex;
flex-direction: column;
justify-content: center;
}
#wrap>.top {
height: 5%;
background-color: rgb(243, 239, 239);
display: flex;
flex-direction: row;
}
.svg-right {
margin-left: auto;
}
.svg-right svg {
width: 36px;
height: 100%;
}
.svg-right1 svg{
width: 50px;
height: 70%;
}
#wrap>.head {
height: 5%;
background-color: rgb(252, 249, 248);
display: flex;
}
#wrap>.content {
height: 80%;
}
.item{
display: flex;
height: 50px;
border: 1px solid black;
background-color: rgb(176, 179, 180);
}
.item img{
height: 50px;
width: 50px;
}
.item p{
text-align: left;
}
.item .user{
padding-top: 4px;
font-size: 18px;
}
.item .msg{
padding-top: 8px;
font-size: 12px;
overflow:hidden;
white-space:nowrap;
width: calc(380px - 100px);
text-overflow:ellipsis;
}
.item .timer{
width: 50px;
height: 50px;
margin-left: auto;
}
#wrap>.footer {
height: 10%;
display: flex;
justify-content: space-between;
}
.text {
font-size: 20px;
}
.top, .head ,.content,.footer{
border: 1px solid black;
}
.svg-right1 p{
text-align: center;
}
html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="wrap">
<div class="top">
<div class="text">22:13</div>
<div class="svg-right">
<svg t="1591608882298" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="6383" width="200" height="200">
<path
d="M617.984 576l0-128 86.016 0 0 128-86.016 0zM553.984 384l0 256 171.989333 0q18.005333 0 29.994667-11.989333t11.989333-29.994667l0-171.989333q0-18.005333-11.989333-29.994667t-29.994667-11.989333l-171.989333 0zM470.016 640l0-256-64 0 0 105.984-86.016 0 0-105.984-64 0 0 256 64 0 0-86.016 86.016 0 0 86.016 64 0zM809.984 128q34.005333 0 59.989333 25.984t25.984 59.989333l0 596.010667q0 34.005333-25.984 59.989333t-59.989333 25.984l-596.010667 0q-36.010667 0-61.013333-25.984t-25.002667-59.989333l0-596.010667q0-34.005333 25.002667-59.989333t61.013333-25.984l596.010667 0z"
p-id="6384"></path>
</svg>
<svg t="1591608842045" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="4098" width="200" height="200">
<path
d="M153.6 375.466667c0 10.24 6.826667 17.066667 17.066667 17.066666s17.066667-6.826667 17.066666-17.066666V256h34.133334c10.24 0 17.066667-6.826667 17.066666-17.066667s-6.826667-17.066667-17.066666-17.066666h-34.133334V34.133333c0-6.826667-3.413333-13.653333-13.653333-17.066666-6.826667-3.413333-13.653333 0-20.48 6.826666l-136.533333 204.8c-3.413333 6.826667-3.413333 13.653333 0 17.066667s10.24 10.24 17.066666 10.24h119.466667V375.466667zM64.853333 221.866667l88.746667-129.706667v129.706667H64.853333zM494.933333 290.133333V238.933333c0-10.24-6.826667-17.066667-17.066666-17.066666h-85.333334c-10.24 0-17.066667 6.826667-17.066666 17.066666s6.826667 17.066667 17.066666 17.066667h68.266667v34.133333c0 37.546667-30.72 68.266667-68.266667 68.266667s-68.266667-30.72-68.266666-68.266667v-170.666666c0-37.546667 30.72-68.266667 68.266666-68.266667s68.266667 30.72 68.266667 68.266667c0 10.24 6.826667 17.066667 17.066667 17.066666s17.066667-6.826667 17.066666-17.066666c0-58.026667-44.373333-102.4-102.4-102.4s-102.4 44.373333-102.4 102.4v170.666666c0 58.026667 44.373333 102.4 102.4 102.4s102.4-44.373333 102.4-102.4zM477.866667 529.066667c-13.653333 0-27.306667 6.826667-37.546667 17.066666l-81.92 98.986667c-23.893333 23.893333-34.133333 51.2-34.133333 85.333333V955.733333c0 27.306667 23.893333 51.2 51.2 51.2h102.4c27.306667 0 51.2-23.893333 51.2-51.2V580.266667c0-27.306667-23.893333-51.2-51.2-51.2zM204.8 802.133333c-13.653333 0-27.306667 6.826667-34.133333 13.653334l-102.4 102.4c-13.653333 13.653333-20.48 37.546667-10.24 54.613333s27.306667 30.72 47.786666 30.72h102.4c27.306667 0 51.2-23.893333 51.2-51.2v-102.4c-3.413333-23.893333-27.306667-47.786667-54.613333-47.786667zM955.733333 17.066667c-13.653333 0-27.306667 6.826667-37.546666 17.066666l-78.506667 92.16c-23.893333 23.893333-37.546667 58.026667-37.546667 88.746667V955.733333c0 27.306667 23.893333 51.2 51.2 51.2h102.4c27.306667 0 51.2-23.893333 51.2-51.2V68.266667c0-27.306667-23.893333-51.2-51.2-51.2zM716.8 290.133333c-13.653333 0-27.306667 6.826667-34.133333 13.653334l-81.92 81.92c-23.893333 23.893333-34.133333 51.2-34.133334 85.333333V955.733333c0 27.306667 23.893333 51.2 51.2 51.2h102.4c27.306667 0 51.2-23.893333 51.2-51.2V341.333333c-3.413333-27.306667-27.306667-51.2-54.613333-51.2z"
fill="" p-id="4099"></path>
</svg>
<svg t="1591608749892" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1265" width="200" height="200">
<path
d="M184.7 657.4h413.6V366.5H184.7v290.9z m690.9-218.2v-72.7c0-40-32.7-72.7-72.7-72.7H184.7c-40 0-72.7 32.7-72.7 72.7v290.9c0 40 32.7 72.7 72.7 72.7h618.1c40 0 72.7-32.7 72.7-72.7v-72.7c20 0 36.4-16.4 36.4-36.4v-72.7c0-20-16.3-36.4-36.3-36.4z m-36.4 36.4v181.8c0 20-16.4 36.4-36.4 36.4H184.7c-20 0-36.4-16.4-36.4-36.4V366.5c0-20 16.4-36.4 36.4-36.4h618.1c20 0 36.4 16.4 36.4 36.4v109.1z m0 0"
p-id="1266"></path>
</svg>
</div>
</div>
<div class="head">
<div class="text">微信</div>
<div class="svg-right">
<svg t="1591609141999" class="icon" viewBox="0 0 1025 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="8672" width="200" height="200">
<path
d="M437.178281 78.40223c-206.158604 0-373.288094 167.12949-373.288094 373.286094 0 206.164604 167.12949 373.293094 373.288094 373.293094 206.162604 0 373.292094-167.12949 373.292094-373.293094C810.471374 245.531719 643.341885 78.40223 437.178281 78.40223L437.178281 78.40223zM437.178281 751.269201c-165.188484 0-299.574878-134.391394-299.574878-299.580878 0-165.181484 134.386394-299.573878 299.574878-299.573878 165.187484 0 299.572878 134.392394 299.572878 299.573878C736.752158 616.877807 602.365765 751.269201 437.178281 751.269201L437.178281 751.269201zM437.178281 751.269201"
p-id="8673"></path>
<path
d="M949.207781 896.894628 784.003297 731.657144c-15.488045 19.161056-32.703096 36.783108-51.10715 53.136156l164.197481 164.220481c7.198021 7.198021 16.624049 10.794032 26.057076 10.794032 9.432028 0 18.859055-3.596011 26.063076-10.794032C963.603823 934.618738 963.603823 911.29067 949.207781 896.894628L949.207781 896.894628zM949.207781 896.894628"
p-id="8674"></path>
</svg>
<svg t="1591609201858" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="13168" width="200" height="200">
<path
d="M511.998465 66.541509c-246.01816 0-445.457468 199.440331-445.457468 445.458491 0 246.017136 199.439308 445.457468 445.457468 445.457468 246.019183 0 445.459514-199.440331 445.459514-445.457468C957.457979 265.98184 758.017648 66.541509 511.998465 66.541509zM511.998465 929.808758c-230.747361 0-417.809781-187.05628-417.809781-417.808758 0-230.753501 187.06242-417.809781 417.809781-417.809781 230.748385 0 417.808758 187.05628 417.808758 417.809781C929.807223 742.752478 742.74685 929.808758 511.998465 929.808758zM775.988951 476.801337 547.194058 476.801337 547.194058 248.016677c0-19.437701-15.754822-35.193547-35.18229-35.193547-19.447934 0-35.20378 15.755846-35.20378 35.193547l0 228.783637L248.029468 476.800313c-19.447934 0-35.20378 15.755846-35.20378 35.20378 0 19.437701 15.755846 35.193547 35.20378 35.193547l228.77852 0 0 228.773404c0 19.446911 15.755846 35.202757 35.20378 35.202757 19.426445 0 35.18229-15.755846 35.18229-35.202757L547.194058 547.198663l228.794893 0c19.426445 0 35.183314-15.755846 35.183314-35.193547C811.172265 492.557182 795.41642 476.801337 775.988951 476.801337z"
p-id="13169"></path>
</svg>
</div>
</div>
<div class="content">
<div class="item">
<div class="portrait">
<img src="img/star.jpg">
</div>
<div>
<p class="user">
楊老師
</p>
<P class="msg">[10條]圖片向右對齊可使用margin-left: auto;</P>
</div>
<div class="timer">
<p>21:34</p>
</div>
</div>
<div class="item">
<div class="portrait">
<img src="img/1.jpg">
</div>
<div>
<p class="user">
張老師
</p>
<P class="msg">[12條]一般用div+css的容器中文字超出長度會浮動到框外或者把框撐大，這個一般容易解決，
但是我今天就遇到了這樣的問題：在IE6下測試頁面沒反應，在IE8下測試頁面卻正常處理了溢出文字，
我就鬱悶了，這個溢出處理不是IE特有的嗎？怎麼IE6卻不正常呢。後來網上查了才知道，
原來IE6只支持div內寫上溢出處理纔有用，而IE6以上版本寫在<li>裏面纔可以，所以我把相同的溢出處理代碼寫在了div中和
<li>中就正常了，汗啊！！！</P>
</div>
<div class="timer">
<p>12:34</p>
</div>
</div>
<div class="item">
<div class="portrait">
<img src="img/11.jpg">
</div>
<div>
<p class="user">
同學甲
</p>
<P class="msg">[2條]在嗎</P>
</div>
<div class="timer">
<p>8:34</p>
</div>
</div>
</div>
<div class="footer">
<div class="svg-right1">
<svg t="1591609604400" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="15597" width="200" height="200">
<path
d="M512 1.896C229.452 1.896 0 229.452 0 512s229.452 510.104 512 510.104S1022.104 794.548 1022.104 512 794.548 1.896 512 1.896z m-91.022 629.57c-26.548 0-49.304-5.688-75.852-11.377l-75.852 37.926 22.756-66.37c-54.993-37.926-87.23-87.23-87.23-147.912 0-104.296 98.607-185.837 218.074-185.837 108.089 0 201.007 64.474 219.97 153.6-7.585 0-13.274-1.896-20.859-1.896-104.296 0-185.837 77.748-185.837 172.563 0 15.17 1.896 30.34 7.585 45.511-7.585 3.793-15.17 3.793-22.755 3.793z m322.37 77.749l17.067 54.992-58.785-34.133c-22.756 5.689-43.615 11.378-66.37 11.378-104.297 0-185.838-70.163-185.838-157.393S530.963 424.77 635.26 424.77c98.608 0 185.837 70.163 185.837 159.29 0 47.407-32.237 91.021-77.748 125.155z"
fill="#46BB36" p-id="15598"></path>
<path
d="M318.578 379.26c0 17.066 13.274 30.34 30.34 30.34s30.341-13.274 30.341-30.34-13.274-30.341-30.34-30.341-30.341 13.274-30.341 30.34z m235.14 159.288c0 13.274 11.378 24.652 24.652 24.652 13.274 0 24.652-11.378 24.652-24.652 0-13.274-11.378-24.652-24.652-24.652-13.274-1.896-24.651 9.482-24.651 24.652z m-81.54-159.289c0 17.067 13.274 30.341 30.34 30.341 17.067 0 30.341-13.274 30.341-30.34 0-17.067-13.274-30.341-30.34-30.341-17.067 0-30.341 13.274-30.341 30.34zM675.08 538.55c0 13.273 11.378 24.651 24.652 24.651 13.274 0 24.652-11.378 24.652-24.652 0-13.274-11.378-24.652-24.652-24.652-13.274-1.896-24.652 9.482-24.652 24.652z"
fill="#46BB36" p-id="15599"></path>
</svg>
<p >微信</p>
</div>
<div class="svg-right1">
<svg t="1591609663918" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="18007" width="200" height="200">
<path
d="M711.602525 387.791094l215.391628 0c16.918321 0 29.658484 8.594749 29.658484 26.744107 0 18.154475-14.712073 26.749224-31.629371 26.749224L711.602525 441.284425c-16.925485 0-30.656207-8.594749-30.656207-26.749224C680.946318 396.384819 694.677041 387.791094 711.602525 387.791094z"
p-id="18008"></path>
<path
d="M956.088796 537.099654c0 18.151405-12.748349 26.752294-29.661553 26.752294L757.275751 563.851948c-16.925485 0-30.65723-8.597819-30.65723-26.752294 0-18.149359 13.731746-26.743084 30.65723-26.743084l170.132842 0C944.324868 510.35657 956.088796 518.950296 956.088796 537.099654z"
p-id="18009"></path>
<path
d="M800.847106 814.385958c0 39.784098-32.308847 64.12446-72.02643 64.12446L466.867592 878.510418l-84.297918 0-245.941412 0c-39.711444 0-72.024383-24.337291-72.024383-64.12446l0-17.287735c0-36.45426 26.839275-68.769246 61.099566-81.065294l146.643871-65.364707c0 0 39.749306-12.218276 50.631144-24.411993 7.239891-8.121981 9.473769-34.901905 0.296759-52.481282-9.174963-17.577331-83.47825-114.289999-83.47825-195.409528 0-130.822534 85.99149-236.876965 192.06127-236.876965 106.073874 0 192.058201 106.054431 192.058201 236.876965 0 84.695984-83.380012 177.934528-90.234117 200.878077-6.859221 22.943548-7.41283 40.902572 0.333598 48.523133 12.050454 11.843746 43.062771 23.88806 43.062771 23.88806l162.670893 63.391772c34.262338 12.301164 61.10059 45.601594 61.10059 82.055854L800.847106 814.385958 800.847106 814.385958z"
p-id="18010"></path>
<path
d="M926.918429 679.299307 813.853327 679.299307c-16.921391 0-30.653137-8.594749-30.653137-26.752294 0-18.147312 13.731746-26.743084 30.653137-26.743084l114.049522 0c16.921391 0 29.647227 8.594749 29.647227 26.743084C957.549054 670.701488 943.837774 679.299307 926.918429 679.299307z"
p-id="18011"></path>
</svg>
<p>通訊錄</p>
</div>
<div class="svg-right1">
<svg t="1591609693129" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="20351" width="200" height="200">
<path
d="M512.003234 1023.998086a511.972782 511.972782 0 1 1 362.098492-150.012232 508.662167 508.662167 0 0 1-362.098492 150.012232z m0-990.097977c-263.642188 0-478.125195 214.483007-478.125195 478.125195s214.483007 478.125195 478.125195 478.125194 478.125195-214.483007 478.125194-478.125194S775.628179 33.900109 512.003234 33.900109z"
fill="#0F0F0F" p-id="20352"></path>
<path
d="M365.439558 700.19582a16.932415 16.932415 0 0 1-15.139165-24.501998l103.905024-207.741078a16.932415 16.932415 0 0 1 5.310778-6.207402l189.222326-134.735125a16.932415 16.932415 0 0 1 25.002039 21.346568l-103.956753 207.758321a16.932415 16.932415 0 0 1-5.32802 6.207403l-189.187841 134.735124a16.89793 16.89793 0 0 1-9.828388 3.138187z m117.147484-213.32774l-71.62653 143.201332 130.424428-92.869642 71.62653-143.201332z"
fill="#239B54" p-id="20353"></path>
</svg>
<p>發現</p>
</div>
<div class="svg-right1">
<svg t="1591609792706" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="22665" width="200" height="200">
<path
d="M512 64.4c62.4 0 121.1 24.3 165.2 68.4 44.1 44.1 68.4 102.8 68.4 165.2s-24.3 121.1-68.4 165.2c-44.1 44.1-102.8 68.4-165.2 68.4s-121.1-24.3-165.2-68.4c-44.1-44.1-68.4-102.8-68.4-165.2s24.3-121.1 68.4-165.2C390.9 88.7 449.6 64.4 512 64.4M512 0C347.4 0 214 133.4 214 298s133.4 298 298 298 298-133.4 298-298S676.6 0 512 0zM938.9 1024c-17.8 0-32.2-14.4-32.2-32.2 0-112.9-48.5-220.6-133.1-295.5-13.3-11.8-14.6-32.2-2.8-45.5s32.2-14.6 45.5-2.8c48.2 42.7 86.2 93.9 113 152.1 27.7 60.3 41.8 124.8 41.8 191.7 0 17.8-14.4 32.2-32.2 32.2z"
fill="" p-id="22666"></path>
<path
d="M85.1 1024c-17.8 0-32.2-14.4-32.2-32.2 0-62 12.1-122.1 36.1-178.7 23.1-54.7 56.2-103.8 98.4-145.9 42.2-42.2 91.3-75.3 145.9-98.4 56.6-24 116.8-36.1 178.7-36.1 17.8 0 32.2 14.4 32.2 32.2s-14.4 32.2-32.2 32.2c-217.6 0-394.7 177.1-394.7 394.7 0 17.8-14.4 32.2-32.2 32.2z"
fill="" p-id="22667"></path>
</svg>
<p>我</p>
</div>
</div>
</div>
</body>
</html>
