<del>手残把自己的CSS代码删掉了</del>

博主分享了一次惊险的经历:在几乎绝望之际找回了重要的未保存页面,为了防止再次丢失,详细记录了这一过程并进行了更新。

内心几乎是崩溃的。

Update:

啊啊啊啊我又找回来了感动到不行…QvQ【发现有一个没刷新的页面没关

这次一定要好好存一下

Update2.0:进行了一些改动

Update3.0:发现在IE浏览器下观测会出现一点奇怪的问题= =不是很严重先不管了

#home {
    opacity: 0.84;
    margin: 0 auto;
    width: 83%;
    min-width: 950px;
    background-color: #fff;
    padding: 30px;
    margin-top: 30px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
body {
    color: #000;
    background: url(http://images2015.cnblogs.com/blog/1101054/201703/1101054-20170326124944643-1294327907.jpg) fixed;
    background-size: cover;
    background-repeat: no-repeat;
    font-family: "华文中宋";
    font-size: 12px;
    min-height: 101%;
}
#blogTitle {
    height: 20px;
    padding-top: 5px;
    background: #fff url('http://images2015.cnblogs.com/blog/1101054/201705/1101054-20170501125741351-1031259947.png') no-repeat;
    background-position-x: 50px; 
}
#main #mainContent .day {
    background-color: #FAFCF8;
    border-radius: 5px;
    box-shadow: 0 2px 3px rgba(70, 74, 90, 0.85);
    margin-bottom: 25px;
    margin-left: 20px;
    width: 90%;
    padding: 70px 25px;
}
#main #mainContent .dayTitle {
    background-color: #62a3f1;
    border: 0px;
    display: block;
    left: 75px;
    top: 2px;
    border-radius: 2px;
    height: 30px;
    min-width: 140px;
}
#main #mainContent .dayTitle a {
    width: 130px;
    color: #fff;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    margin-top: 3%;
}

#main #mainContent .dayTitle::before {
    border-color: #58B2DC transparent;
    border-style: solid;
    border-width: 10px 0 0 24px;
    content: "";
    display: block;
    position: absolute;
    top: 100%;
    width: 0;
}
#topics .postTitle {
    border: 0px;
    font-size: 200%;
    font-weight: bold;
    float: left;
    line-height: 1.5;
    width: 100%;
    padding-left: 7px;
}
#sideBar .catListTitle {
    background-color: #62a3f1;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
    color: #fff;
    text-align: center;
    font-size: 15px
}
.catListTitle {
    margin-bottom: 10px;
    border-left: 15px solid #f1f8fa;
    padding: 10px 10px 10px 10px;
    background-color: #DFEEF3;
}
#main #mainContent .postCon {
    border-top: 1px solid #76A8C7;
}
.postBody {
    color: #252525;
    line-height: 1.4;
    font-size: 15px;
}
#ad_under_post_holder #google_ad_c1,#google_ad_c2{  
    display: none !important;
}
#ad_t2 {
    margin-top: 5px;
    line-height: 1.8;
    display: none;
}
.c_ad_block {
    margin-top: 10px;
    line-height: 1.5;
    display: none;
}
.diggit {
    width: 150px;
    height: 150px;
    background: url("http://images2015.cnblogs.com/blog/1101054/201705/1101054-20170502124202695-461940724.png");
    background-size: cover;
    cursor: pointer;
    margin-left: -100px;
    margin-top: -100px;
    padding-top: 0px;
}
#div_digg .diggnum {
    line-height: 1.5em !important;
    display: none;
}
.buryit {
    display: none;
}
#tbCommentBody{
    max-width:100%;
    width: 400%;
    height: 150px;
    background:#fff url(http://images2015.cnblogs.com/blog/1101054/201705/1101054-20170501130316914-575873388.png) right bottom no-repeat;
    padding-top:8px;
}

#comment_form_container .comment_textarea {
    width: 700px;
    height: 240px;
    font-size: 14px;
    padding: 8px;
    color: #495571;
    border: 1px solid #919DB7;
    border-radius: 5px;
}

 

转载于:https://www.cnblogs.com/Zars19/p/6896079.html

不改变HTML和CSS, 将JS 部分改为函数式编程 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table { border-collapse: collapse; margin-top: 10px } td, th { border: 1px solid #ddd; padding: 5px } </style> </head> <body> <div> <input id="name" placeholder="姓名"> <input id="age" type="number" placeholder="年龄"> <select id="class"> <option>一班</option> <option>二班</option> <option>三班</option> </select> <label><input type="radio" name="gender" value="男" checked>男</label> <label><input type="radio" name="gender" value="女">女</label> <button id="save">添加</button> </div> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>班级</th> <th>性别</th> <th>操作</th> </tr> </thead> <tbody id="list"></tbody> </table> <script> let students = [], editId = null; const render = () => { document.getElementById('list').innerHTML = students.map(s => ` <tr> <td>${s.id}</td><td>${s.name}</td><td>${s.age}</td> <td>${s.class}</td><td>${s.gender}</td> <td> <button onclick="edit(${s.id})">编辑</button> <button onclick="del(${s.id})">删除</button> </td> </tr> `).join(''); }; document.getElementById('save').onclick = () => { const student = { name: document.getElementById('name').value, age: document.getElementById('age').value, class: document.getElementById('class').value, gender: document.querySelector('input[name="gender"]:checked').value }; if (editId) { students = students.map(s => s.id === editId ? { ...s, ...student } : s); editId = null; } else { students.push({ ...student, id: students.length + 1 }); } render(); document.getElementById('name').value = ''; document.getElementById('age').value = ''; }; window.edit = id => { const s = students.find(s => s.id === id); document.getElementById('name').value = s.name; document.getElementById('age').value = s.age; document.getElementById('class').value = s.class; document.querySelector(`input[value="${s.gender}"]`).checked = true; editId = id; }; window.del = id => { students = students.filter(s => s.id !== id); render(); }; render(); </script> </body> </html>
最新发布
07-28
这是我的index.html代码内容:<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>京东商城 - 购物车</title> <link href="css/font-awesome.min.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" /> </head> <body> <header></header> <div class="content"> <div class="t-head"><h4>全部商品</h4></div> <div class="sct"> <div class="thead"> <div><input type="checkbox" class="selectAll" /></div> <div>全选</div> <div>商品</div> <div>单价</div> <div>数量</div> <div>小计</div> <div>操作</div> </div> <div id="listBox"> <div class="item"> <div><input type="checkbox" name="check" /></div> <div><img src="img/product5.jpg" height="100" /></div> <div>光明 纯牛奶250mL*24盒</div> <div>¥<span class="price">58.80</span></div> <div><input type="number" value="1" min="1" /></div> <div>¥<span class="subtotal">58.80</span></div> <div><a href="#" class="del">删除</a></div> </div> <div class="item"> <div><input type="checkbox" name="check" /></div> <div><img src="img/product5.jpg" height="100" /></div> <div>光明 纯牛奶250mL*24盒</div> <div>¥<span class="price">58.80</span></div> <div><input type="number" value="1" min="1" /></div> <div>¥<span class="subtotal">58.80</span></div> <div><a href="#" class="del">删除</a></div> </div> <div class="item"> <div><input type="checkbox" name="check" /></div> <div><img src="img/product5.jpg" height="100" /></div> <div>光明 纯牛奶250mL*24盒</div> <div>¥<span class="price">58.80</span></div> <div><input type="number" value="1" min="1" /></div> <div>¥<span class="subtotal">58.80</span></div> <div><a href="#" class="del">删除</a></div> </div> <div class="item"> <div><input type="checkbox" name="check"></div> <div><img src="img/product1.jpg" height="100"></div> <div>新品华为笔记本MateBook D 14/15 轻薄本商务办公本笔记本电脑学生 D15i5-10210U 16 512G独显灰</div> <div>¥<span class="price">5239.00</span></div> <div><input type="number" value="1" min="1"></div> <div>¥<span class="subtotal">5239.00</span></div> <div><a href="#" class="del">删除</a></div> </div> </div> <div class="countBox"> <div><input type="checkbox" class="selectAll" /></div> <div>全选 <a href="#" id="delcheck">删除选中的商品</a></div> <div> <span class="gray">总价:</span> ¥<span id="totalprice">0.00</span> </div> <div>去结算</div> </div> </div> </div> <div class="p-head"><h5>猜你喜欢</h5></div> <div class="productsBox"> <div class="product"> <img src="img/product1.jpg" height="100" /> <p> 新品华为笔记本MateBook D 14/15 轻薄本商务办公本笔记本电脑学生 D15 i5-10210U 16 512G独显灰 </p> <div>¥5239.00</div> <button class="add-to-cart"> <i class="fa fa-shopping-cart" aria-hidden="true"></i> 加入购物车 </button> </div> <div class="product"> <img src="img/product1.jpg" height="100" /> <p> 新品华为笔记本MateBook D 14/15 轻薄本商务办公本笔记本电脑学生 D15 i5-10210U 16 512G独显灰 </p> <div>¥5239.00</div> <button> <i class="fa fa-shopping-cart" aria-hidden="true"></i> 加入购物车 </button> </div> </div> <footer></footer> <script src="js/shoppingcar.js"></script> </body> <script> // 等待DOM加载完毕 document.addEventListener('DOMContentLoaded', function () { // 全选/取消全选功能 const selectAllCheckboxes = document.querySelectorAll('.selectAll'); const itemCheckboxes = document.querySelectorAll('input[name="check"]'); selectAllCheckboxes.forEach(function (checkbox) { checkbox.addEventListener('change', function () { itemCheckboxes.forEach(function (itemCheckbox) { itemCheckbox.checked = checkbox.checked; }); calculateTotal(); }); }); // 监听每个商品的复选框变化 itemCheckboxes.forEach(function (checkbox) { checkbox.addEventListener('change', function () { const allChecked = Array.from(itemCheckboxes).every(checkbox => checkbox.checked); selectAllCheckboxes.forEach(function (selectAllCheckbox) { selectAllCheckbox.checked = allChecked; }); calculateTotal(); }); }); // 数量变化时更新小计 document.getElementById('listBox').addEventListener('change', function (event) { if (event.target.tagName === 'INPUT' && event.target.type === 'number') { const item = event.target.parentElement.parentElement; updateSubtotal(item); } }); // 删除商品 document.getElementById('listBox').addEventListener('click', function (event) { if (event.target.classList.contains('del')) { event.preventDefault(); const item = event.target.parentElement.parentElement; item.remove(); calculateTotal(); } }); // 计算总价 function calculateTotal() { let total = 0; itemCheckboxes.forEach(function (checkbox) { if (checkbox.checked) { const item = checkbox.parentElement.parentElement; const price = parseFloat(item.querySelector('.price').textContent); const quantity = parseInt(item.querySelector('input[type="number"]').value); total += price * quantity; } }); document.getElementById('totalprice').textContent = total.toFixed(2); } // 更新小计 function updateSubtotal(item) { const price = parseFloat(item.querySelector('.price').textContent); const quantity = parseInt(item.querySelector('input[type="number"]').value); const subtotal = price * quantity; item.querySelector('.subtotal').textContent = subtotal.toFixed(2); calculateTotal(); } // 删除选中的商品 document.getElementById('delcheck').addEventListener('click', function (event) { event.preventDefault(); itemCheckboxes.forEach(function (checkbox) { if (checkbox.checked) { const item = checkbox.parentElement.parentElement; item.remove(); } }); calculateTotal(); }); document.querySelectorAll('.add-to-cart').forEach(function(button) { button.addEventListener('click', function(event) { event.preventDefault(); const product = button.closest('.product'); const imgSrc = product.querySelector('img').src; const productName = product.querySelector('p').textContent; const price = parseFloat(product.querySelector('div').textContent); // 检查商品是否已存在于购物车 let existingItem = document.querySelector(`.item img[src="${imgSrc}"]`).parentElement; if (existingItem) { // 如果已存在,则增加数量 const quantityInput = existingItem.querySelector('input[type="number"]'); quantityInput.value = parseInt(quantityInput.value) + 1; updateSubtotal(existingItem); } else { // 如果不存在,则添加新商品 const newItem = createCartItem(imgSrc, productName, price); document.getElementById('listBox').appendChild(newItem); } calculateTotal(); }); }); // 创建购物车中的商品项 function createCartItem(imgSrc, productName, price) { const item = document.createElement('div'); item.className = 'item'; item.innerHTML = ` <div><input type="checkbox" name="check" checked /></div> <div><img src="${imgSrc}" height="100" /></div> <div>${productName}</div> <div>¥<span class="price">${price.toFixed(2)}</span></div> <div><input type="number" value="1" min="1" /></div> <div>¥<span class="subtotal">${price.toFixed(2)}</span></div> <div><a href="#" class="del">删除</a></div> `; // 为新添加的删除按钮和小计数量添加事件监听 item.querySelector('.del').addEventListener('click', function(event) { event.preventDefault(); item.remove(); calculateTotal(); }); item.querySelector('input[type="number"]').addEventListener('change', function() { updateSubtotal(item); }); return item; } }); </script> </html> ,不过这段代码不是很正确,有些功能未正确实现,这是我的product.json:{ "status": "success", "data": [ { "name": "新品华为笔记本MateBook D 14/15 轻薄本商务办公本笔记本电脑学生 D15i5-10210U 16 512G独显灰", "img": "product1.jpg", "price": "5239.00" }, { "name": "新款Huawei/华为折叠机mates xs5g版大屏双屏全面屏双面屏官方旗舰店对折机可折叠屏 Mate XS折叠", "img": "product2.jpg", "price": "20980.00" }, { "name": "华为智慧屏V55i-A 55英寸 HEGE-550 4K超薄全面屏液晶电视机 多方视频通话AI升降摄像头 4GB+64GB 星际黑", "img": "product3.jpg", "price": "3999.00" }, { "name": "华为荣耀智能表WATCH Magic运动男女2Pro环定位NFC支付陶瓷版(流沙杏)", "img": "product4.jpg", "price": "699.00" } ] }它位于C:\Users\金邦鑫\Downloads\京东仿制效果\京东仿制效果\js\products.json,其中index.html要获取product.json中的数据实现内容数据的加载,你还要实现script中的全选,删除等等代码功能,注意仅仅实现script中的代码内容
06-21
这是我的shoppingcar.js文件:// 页面加载完成后执行a函数 window.onload = a; // a函数,页面加载完成后执行的函数 function a() { // 获取所有全选复选框 var selectall = document.querySelectorAll(".selectAll"); // 获取所有单选复选框 var checkbox = document.querySelectorAll("[name=check]"); // 为每个全选复选框添加点击事件监听器 selectall.forEach(sa => sa.onclick = e => { // 遍历所有全选复选框,将它们的状态设置为点击的复选框的状态 selectall.forEach(sa => sa.checked = e.target.checked); // 遍历所有单选复选框,将它们的状态设置为点击的复选框的状态 checkbox.forEach(cb => cb.checked = e.target.checked); // 调用total函数计算总价 total(); }); // 为每个单选复选框添加点击事件监听器 checkbox.forEach(cb => cb.onclick = checkAll); // 获取所有数量输入框 var number = document.querySelectorAll("[type=number]"); // 为每个数量输入框添加改变事件监听器 number.forEach(nb => nb.onchange = e => { // 获取价格和数量 var price = e.target.parentNode.parentNode.querySelector(".price").innerText; var number = e.target.value; // 计算小计并设置到页面上 e.target.parentNode.parentNode.querySelector(".subtotal").innerText = Number(price * number).toFixed(2); // 调用total函数计算总价 total(); }); // 加载商品数据 load(); // 为每个删除按钮添加点击事件监听器 document.querySelectorAll(".del").forEach(de => { de.onclick = () => { // 获取父元素 var parent = de.parentNode.parentNode.parentNode; // 获取父元素的父元素 var parent1 = de.parentNode.parentNode; // 确认是否删除 if (confirm("确认删除")) { // 移除父元素 parent.removeChild(parent1); } // 调用total函数计算总价 total(); }; }); // 为删除选中商品按钮添加点击事件监听器 document.querySelector("#delcheck").onclick = () => { // 获取选中的商品数量 var a = confirm("删除选中的商品"); // 遍历所有单选复选框 document.querySelectorAll("input[name=check]").forEach(de => { // 如果复选框被选中且确认删除,则移除父元素 if (de.checked && a) { var parent = de.parentNode.parentNode.parentNode; var parent1 = de.parentNode.parentNode; if (confirm("确认删除?")) { parent.removeChild(parent1); } } }); }; // 调用total函数计算总价 total(); } // 检查所有复选框是否都被选中 function checkAll() { // 获取所有全选复选框 var selectall = document.querySelectorAll(".selectAll"); // 获取所有单选复选框 var checkbox = document.querySelectorAll("[name=check]"); // 获取单选复选框的总数 var total = checkbox.length; // 获取选中的单选复选框的数量 var count = 0; // 遍历单选复选框 checkbox.forEach(cb => { // 如果复选框被选中,计数器加1 if (cb.checked) count++; }); // 如果所有单选复选框都被选中,将全选复选框也设置为选中状态 if (count === total) { selectall.forEach(sa => sa.checked = true); } else { // 否则 selectall.forEach(sa => sa.checked = false); } } // 计算总价 function total() { // 获取所有商品项 var items = document.querySelectorAll(".item"); // 初始化总价 var sum = 0; // 遍历商品项 for (var item of items) { // 如果单选复选框被选中 if (item.querySelector("[name=check]").checked) { // 累加小计到总价 sum += Number(item.querySelector(".subtotal").innerText); } } // 设置总价到页面上 document.querySelector("#totalprice").innerText = sum.toFixed(2); } // 异步加载商品数据 function load() { // 使用fetch API异步获取JSON数据 fetch("./js/products.json").then(resp => resp.json()).then(res => { // 输出商品数据到控制台 console.log(res); // 如果数据加载成功 if (res.status === "success") { // 输出商品数据到控制台 console.log(res.data); // 获取商品列表容器 const dom = document.querySelector(".productsBox"); // 初始化HTML字符串 let html = ""; // 遍历商品数据 for (const p of res.data) { // 构建商品HTML并添加到容器 html += `<div class="product"> <img src="img/${p.img}" height="100"> <p>${p.name}</p> <div>¥${p.price}</div> <button>加入购物车</button> </div>`; } // 将HTML设置为商品列表容器的innerHTML dom.innerHTML = html; // 获取所有按钮 const btns = dom.querySelectorAll("button"); // 为每个按钮添加点击事件监听器 btns.forEach((b, index) => { b.onclick = () => { // 添加商品到购物车 addToCart(res.data[index]); }; }); } }).catch(e => { // 处理错误 console.error("加载失败,请重试"); }); } // 添加商品到购物车 function addToCart(product) { // 获取所有商品项 const items = document.querySelectorAll(".item"); // 遍历商品项 for (const item of items) { // 如果商品名称与当前商品相同 if (item.querySelector("div:nth-child(3)").innerHTML.trim() === product.name) { // 获取数量输入框 const number = item.querySelector("[type=number]"); // 增加数量 number.value = Number(number.value) + 1; // 触发改变事件 number.dispatchEvent(new Event("change")); // 返回,避免继续添加相同的商品 return; } } // 构建新的商品HTML并添加到购物车列表 let html = ` <div class="item"> <div><input type="checkbox" name="check" /></div> <div><img src="img/${product.img}" height="100" /></div> <div>${product.name}</div> <div>¥<span class="price">${product.price}</span></div> <div><input type="number" value="1" min="1" /></div> <div>¥<span class="subtotal">${product.price}</span></div> <div><a href="#" class="del">删除</a></div> </div>`; // 将HTML添加到购物车列表 document.querySelector("#listBox").innerHTML += html; // 重新绑定事件监听器 a(); } ,这是我的index.html:<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>京东商城 - 购物车</title> <link href="css/font-awesome.min.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" /> </head> <body> <header></header> <div class="content"> <div class="t-head"><h4>全部商品</h4></div> <div class="sct"> <div class="thead"> <div><input type="checkbox" class="selectAll" /></div> <div>全选</div> <div>商品</div> <div>单价</div> <div>数量</div> <div>小计</div> <div>操作</div> </div> <div id="listBox"> <div class="item"> <div><input type="checkbox" name="check" /></div> <div><img src="img/product5.jpg" height="100" /></div> <div>光明 纯牛奶250mL*24盒</div> <div>¥<span class="price">58.80</span></div> <div><input type="number" value="1" min="1" /></div> <div>¥<span class="subtotal">58.80</span></div> <div><a href="#" class="del">删除</a></div> </div> <div class="item"> <div><input type="checkbox" name="check" /></div> <div><img src="img/product5.jpg" height="100" /></div> <div>光明 纯牛奶250mL*24盒</div> <div>¥<span class="price">58.80</span></div> <div><input type="number" value="1" min="1" /></div> <div>¥<span class="subtotal">58.80</span></div> <div><a href="#" class="del">删除</a></div> </div> <div class="item"> <div><input type="checkbox" name="check" /></div> <div><img src="img/product5.jpg" height="100" /></div> <div>光明 纯牛奶250mL*24盒</div> <div>¥<span class="price">58.80</span></div> <div><input type="number" value="1" min="1" /></div> <div>¥<span class="subtotal">58.80</span></div> <div><a href="#" class="del">删除</a></div> </div> <div class="item"> <div><input type="checkbox" name="check"></div> <div><img src="img/product1.jpg" height="100"></div> <div>新品华为笔记本MateBook D 14/15 轻薄本商务办公本笔记本电脑学生 D15i5-10210U 16 512G独显灰</div> <div>¥<span class="price">5239.00</span></div> <div><input type="number" value="1" min="1"></div> <div>¥<span class="subtotal">5239.00</span></div> <div><a href="#" class="del">删除</a></div> </div> </div> <div class="countBox"> <div><input type="checkbox" class="selectAll" /></div> <div>全选 <a href="#" id="delcheck">删除选中的商品</a></div> <div> <span class="gray">总价:</span> ¥<span id="totalprice">0.00</span> </div> <div>去结算</div> </div> </div> </div> <div class="p-head"><h5>猜你喜欢</h5></div> <div class="productsBox"> <div class="product"> <img src="img/product1.jpg" height="100" /> <p> 新品华为笔记本MateBook D 14/15 轻薄本商务办公本笔记本电脑学生 D15 i5-10210U 16 512G独显灰 </p> <div>¥5239.00</div> <button class="add-to-cart"> <i class="fa fa-shopping-cart" aria-hidden="true"></i> 加入购物车 </button> </div> <div class="product"> <img src="img/product1.jpg" height="100" /> <p> 新品华为笔记本MateBook D 14/15 轻薄本商务办公本笔记本电脑学生 D15 i5-10210U 16 512G独显灰 </p> <div>¥5239.00</div> <button> <i class="fa fa-shopping-cart" aria-hidden="true"></i> 加入购物车 </button> </div> </div> <footer></footer> <script src="js/shoppingcar.js"></script> </body> </html>,这是我的productsjson{ "status": "success", "data": [ { "name": "新品华为笔记本MateBook D 14/15 轻薄本商务办公本笔记本电脑学生 D15i5-10210U 16 512G独显灰", "img": "product1.jpg", "price": "5239.00" }, { "name": "新款Huawei/华为折叠机mates xs5g版大屏双屏全面屏双面屏官方旗舰店对折机可折叠屏 Mate XS折叠", "img": "product2.jpg", "price": "20980.00" }, { "name": "华为智慧屏V55i-A 55英寸 HEGE-550 4K超薄全面屏液晶电视机 多方视频通话AI升降摄像头 4GB+64GB 星际黑", "img": "product3.jpg", "price": "3999.00" }, { "name": "华为荣耀智能表WATCH Magic运动男女2Pro环定位NFC支付陶瓷版(流沙杏)", "img": "product4.jpg", "price": "699.00" } ] } ,请详细注释shoppingcar.js中每行代码的意思
06-23
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>欢迎来到我的御书房</title> <style> .style1{ font-family: "Times New Roman", Times, serif; font-size: 16px; line-height: 1.6; color: #333; } a { text-decoration: none; } table { width: 1000px; border-collapse: collapse; background: linear-gradient(to right, #e0eafc, #cfdef3); } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; border: 1px solid #ddd; padding: 5px; } th { background-color: #f2f2f2; text-align: center; } th:hover { color: #0056b3; /* 鼠标悬停时颜色稍变深 */ } tr:nth-child(odd) { background-color: #f2f2f2; } </style> </head> <?php include("conn.php"); ?> <body> <div id="apDiv1" align="center"><img src="lili3277.jpg" width="796" height="108" /></div> <div id="apDiv2"> <table width="867" border="0" align="center" > <tr> <th width="105"><span class="style1"><?PHP echo date("Y-m-d"); ?></span></th> <th width="114"><span class="style1"><a href="index.php">首页</a></span></th> <th width="125"><span class="style1"><a href="borrow.php">浏览信息</a></span></th> <th width="116"><span class="style1"><a href="add.php">添加图书</a></span></th> <th width="102"><span class="style1"><a href="search.php">简单查询</a></span></th> <th width="93"><span class="style1"><a href="searchmore.php">复杂查询</a></span></th> <th width="90"><span class="style1"><a href="group.php">分组统计</a></span></th> <th width="88"><span class="style1"><a href="quit.php">退出系统</a></span></th> </tr> </table> </div> <div id="apDiv3"> <form id="forml" name="forml" action="" method="post"> <table width="778" border="1" align="center"> <tr> <th width="97"><a href=" ?od=id" class="style1">图书编号</a></th> <th width="93"><a href=" ?od=bookname" class="style1">图书名称</a></th> <th width="95"><a href=" ?od=issuDate" class="style1">出版日期</a></th> <th width="93"><a href=" ?od=price" class="style1">图书定价</a></th> <th width="57"><a href=" ?od=maker" class="style1">作者</a></th> <th width="76"><a href=" ?od=publisher" class="style1">出版社</a></th> <th width="92"><span class="style1">操作</span></th> </tr> <?php $od=$_GET[od]; if($od==""){ $sql="select * from tb_book order by id desc limit 12";}else{ $sql="select * from tb_book order by ".$od." desc limit 12"; } $result=mysqli_query($conn,$sql); while($myrow=mysqli_fetch_array($result)){ ?> <tr> <td><div align="center"><span class="style1"><?php echo $myrow[0]; ?></span></div></td> <td><div align="center"><span class="style1"><?php echo $myrow[1]; ?></span></div></td> <td><div align="center"><span class="style1"><?php echo $myrow[2]; ?></span></div></td> <td><div align="center"><span class="style1"><?php echo $myrow[3]; ?></span></div></td> <td><div align="center"><span class="style1"><?php echo $myrow[4]; ?></span></div></td> <td><div align="center"><span class="style1"><?php echo $myrow[5]; ?></span></div></td> <td><div align="center"><span class="style1"><a href="del.php?id=<? echo $myrow[0]?>">删除</a>/<a href="update.php?id=<? echo $myrow[0]?>">修改</a></span></div></td> </tr> <?php }?> </table> </form> </div> <div id="apDiv4"> <p align="center">版权所有:22电子商务专业</p> <p align="center">校址:安徽省池州市教育园区</p> </div> </body> </html> 我这段代码插入背景图片后背景为什么不显示
06-06
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值