京東官網
源碼地址：https://github.com/Rookie-White/02
參考地址：https://github.com/T55330/jd
一、布局
二、兩個頭部
頭部導航欄部分
1、分割線的用法：
content: “”; flex: auto; display: block; height: xxpx; width: xxxpx; background-color: #c4c1c1;
2、css之display:inline-block布局
inline（行內元素），block（塊級元素），inline-block不獨占一行的塊級元素
display: inline-block;
3、畫個三角形
#sanjiao{
width: 0;
height: 0;
border-width:10px;
border-style:solid;
border-color: red transparent green transparent;
}
效果圖：
搜索框頭部
問題：
購物車一直出不來，不清楚什么原因，哈哈哈哈
效果圖：
三、輪播圖部分+京東秒殺+特價部分
京東秒殺
1、省略字體css樣式
{ /* 不顯示超過對象尺寸的內容
overflow: hidden;
默認處理方式。文本自動處理換行。假如抵達容器邊界內容會轉到下一行white-space: nowrap;
當對象內文本溢出時顯示省略標記(…) */text-overflow: ellipsis;
}
2、flex-direction用法解釋
row：
主軸與行內軸方向作為默認的書寫模式。即橫向從左到右排列（左對齊）。
row-reverse：
對齊方式與row相反。
column：
主軸與塊軸方向作為默認的書寫模式。即縱向從上往下排列（頂對齊）。
column-reverse：
對齊方式與column相反。
3、浮動 position: fixed;
問題：
1、右邊浮動定位沒有設置好，可以動，不可定，哈哈哈
2、因為是純css+HTML
js實現倒計時
<script>
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
var inputTime = +new Date('2021-8-4 18:00:00');//返回的是用戶輸入時間總的毫秒數
countDown();//我們先調用一次函數，防止第一次刷新頁面有空白
setInterval(countDown, 1000);
function countDown() {
var nowTime = +new Date(); //返回的是當前時間總的毫秒數
var times = (inputTime - nowTime) / 1000; // times是剩余時間總的秒數
var h = parseInt(times / 60 / 60 % 24);
h = h < 10 ? '0' + h : h;
hour.innerHTML = h;
var m = parseInt(times / 60 % 60);
m = m < 10 ? '0' + m : m;
minute.innerHTML = m;
var s = parseInt(times % 60);
s = s < 10 ? '0' + s : s;
second.innerHTML = s;
}
</script>
效果圖：
輪播圖
1、css中“~”（波浪號）的意思
.p:hover ~ li
p~li 表示選擇前面有 p標簽的每個小 li 都會有效果
2、css3中的width屬性的width: calc(100% - 20px);問題，一定要注意中間的空格
css3 的 calc()函數。
這里的意思是設置寬度比100%的寬度少20px。
問題：
輪播圖沒有效果，和秒殺一樣，使用js來實現，唉！還是用框架舒服啊~
效果圖：
特價
布局都差不多，沒有圖片就不放了，麻煩。。。。。。
四、底部
1、網格布局
.box{
display: grid; 下面定義網格的 列 和 行
grid-template-columns: repeat(4, 210px); 每個元素的占比
grid-auto-rows: 100px;
}
2、display:flex屬性 justify-content: space-between和 space-around 換行后的排版問題
.box{
display:flex; 彈性盒子
justify-content: space-between; 兩端對齊，子元素之間有間隙
flex-flow: row wrap;子元素溢出父容器時換行
}
如果需要左對齊，加 .box:after {content: “”; width: 100px; }
justify-content: space-around; flex布局，對齊內容：周圍空間
效果圖：