html+css 小案例(一)

文章目錄

    • 點擊下載

index.html

<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><title>Demo_Test</title><link rel="stylesheet" href="css/Dec.css">
</head>
<body><div class="header" ><div class="logo" ><img src="Photo/01-M1.jpg" height="50" width="142"  /></div><nav class="nav"><ul><li><a href="#">Home</a></li><li><a href="#">Why Actority?</a></li><li><a href="#">About us</a></li><li><a href="#">Blog</a></li><li><a href="#">Contact</a></li></ul></nav><nav class="But"><ul><li><a href="#">FOR ACTORS</a> </li></ul></nav>
</div><div class="bodyone"><div class="logo1"><img src="Photo/01-p1.jpg" height="82" width="571"/><div  class="content1" id="content1"  style="background-color:#1e2831;height:116px;width:300px;"><p class="title1">Best talents in one place</p><p class="character1">Suspendisse potenti Morbi sed maurs dui.<br>Duis sedligula odio,ac sollicitudin leo.<br>Etiam eget erat nisl,nec rhoncus risus.</p></div></div><div  class="content2" id="content2"  style="background-color:#1e2831;height:116px;width:300px;"><p class="title2">High-quality services</p><p class="character2">Nulla quis massa eros,placerat<br>condimentum leo.Curabitur semper lectus<br>eu nisi lacinia pretium.</p></div><div   class="content3" id="content3"  style="background-color:#1e2831;height:116px;width:300px;"><p class="title3">Lowest prices</p><p class="character3">Sed dui mauris,semper non sodales sed,<br>dignissim ac magna,In non viverra turpis.<br>Donecturpis est,iaculis in varius nec.</p></div>
</div><div class="bodytwo"><div class="logo2"><img src="Photo/01-home.jpg" height="40" width="448"/></div ><nav><a class="button1" href="#1">SEND THE SPEC</a></nav><div><p class="S">OR</p></div><nav><a class="button2" href="#2">CONTACT US</a></nav></div><div class="bodythree"><div><p class="T">Casting Actority:IMG Group</p></div><div class="logo3"><img src="Photo/01-p2.jpg" height="190" width="299"/></div><div><p class="R">Excepteur sin:occaecat cupidatat non proident,<br>sunt in culpa qui officia.</p></div><div><p class="P">Featured Casting Work</p><p class="L">View more</p></div><div class="Adobe"><div class="a1" ><img src="Photo/01-p3%20.jpg" height="90" width="140"/></div><div  class="a2"><img src="Photo/01-pS.jpg" height="91" width="140"/></div><div  class="a3"><img src="Photo/01-p4.jpg" height="90" width="140"/></div><div class="a4"><img src="Photo/01-p5.jpg" height="90" width="140"/></div><div  class="a5"><img src="Photo/01-p5%206.jpg" height="90" width="140"/></div><div  class="a6"><img src="Photo/01-p7.jpg" height="90" width="140"/></div><div  class="a7"><img src="Photo/01-p8.jpg" height="90" width="140"/></div><div class="a8"><img src="Photo/01-p9.jpg" height="90" width="140"/></div></div></div><div class="bodyfour"><div ><p class="W" >What People Are Saying</p></div><div class="TF"><img src="Photo/01-t1.jpg" height="200" width="159"/></div><div><p class="J">Lorem ipsum dolor sit amet,<br>consectetur adipisicing elit,sed do<br>eiusmod tempor incididunt!</p></div><div><p class="Q">//Joe Doe,Actor</p></div><div class="logo4"><img src="Photo/F1.jpg" height="60" width="60"/></div><div><p class="B"> // Garry Doe,Producer</p></div><div><p class="A">Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do<br>eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut<br>enim ad minim veniam,quis nostrud.</p></div><div class="logo5"><img src="Photo/F2.jpg" height="60" width="60"/></div><div><p class="C">Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do<br>eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut<br>enim ad minim veniam,quis nostrud.</p></div><div><p class="D"> // Garry Doe,Producer</p></div>
</div><div class="bodyfive"><div><p class="K">Recent Posts</p></div><div class="logo6"><img src="Photo/01-s3.jpg" height="240" width="399"/></div><div><p class="acm">Post Title Example</p></div><p class="adb">posted on <span style="color:#dc4545">April,15</span> by <span style="color:#dc4545">admin</span></p><p class="RNG">Mauris lobritis vehicula ultricies.Cum sociisnatoque penaatibus et<br>magnis dis parturientmontes,nascetur ridiculus mus.Nunc tellus<br>nisi,pharetra id elementum non,aliquam vel tellus.</p><p class="TL">25 comments //397 views</p><nav><a class="button3" href="#1">READ MORE</a></nav><p class="FPX">Post Title Example</p><div class="logo7"><img src="Photo/01-s2.jpg" height="100" width="160"/></div><p class="flash">posted on <span style="color:#dc4545">April,15</span> by <span style="color:#dc4545">admin</span></p><p class="IG">Mauris lobritis vehicula ultricies.Cum sociis<br>natoque penaatibus et magnis dis parturient<br>montes,nascetur ridiculus mus.</p><p class="OK">25 comments //397 views</p><P CLASS="JDG">- - - - - - - - - - - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - - - - - - - - - - - -</P><div class="logo8"><img src="Photo/s4.jpg" height="100" width="160"/></div><div><p class="CTF">Post Title Example</p></div><p class="player">posted on <span style="color:#dc4545">April,15</span> by <span style="color:#dc4545">admin</span></p><p class="LPL">Mauris lobritis vehicula ultricies.Cum sociis<br>natoque penaatibus et magnis dis parturient<br>montes,nascetur ridiculus mus.</p><p class="LCK">25 comments //397 views</p><p class="JK">View all posts</p></div><div class="bodysix"><div class="end"><input type="text" value="Enter Your Email Address"  style=" font-size:15px;color:#5a6066;border-radius:3px;width: 300px ;height: 40px"></div><p class="CF">About</p><p class="NZ">Recent tweets</p><p class="JS">Etiam cursus libero in libero consequat<br>consequat,Nullam fringilla sapien massa.Nam<br>velit nisl,bibendum at placerat at,pretium sed<br>magna.</p><nav><a class="button4" href="#1">SEND THE SPEC</a></nav><p class="LJ"><span style="color: #dc4545">@bestwebsoft</span>velit,vitae tincidunt orci.Proin<br>vitae auctor lectus.<span style="color: #dc4545">http://bestwebsoft.com/</span></p><p class="NS">posted 2 days ago</p><p class="SF"><span style="color: #dc4545">@bestwebsoft</span>velit,vitae tincidunt orci.Proin<br>vitae auctor lectus.<span style="color: #dc4545">http://bestwebsoft.com/</span></p><p class="COOL">posted 2 days ago</p><p class="beg" >Newsletter Signup</p><p class="last">Etiam cursus libero in libero consequat<br>consequat.</p><nav><a class="button5" href="#1">SUBMIT</a></nav>
</div><div class="bodyseven"><div class="logo12"><img src="Photo/01-e1.jpg" height="86" width="146"/></div><div class="logo13"><img src="Photo/01-e2.jpg" height="48" width="301"/></div><div ><p class="Z"> <span style="color:#999999 ">Design with love by</span> <span style="color: #1e2831">BestWebSoft</span></p></div>
</div>
</body>
</html>

Dec.css

*{margin:0;padding: 0;/*邊緣消失*/
}
body{background-color: #f8f8f8;width: 1200px;height: 2250px;margin: 0 auto;/*上下間距設計*/
}
.header{width: 100%;height: 88px;background-color: #2a3743;
}
/*!!!第一部分*/
/*圖片*/
.logo{position: relative;top:20px;float: left;margin-left: 120px;
}
.nav ul{margin:0 auto;width: 1000px;height: 50px;
}
/*菜單四個標簽欄*/
.nav ul li{list-style: none;float: left;
}
.nav ul li a:link,.nav ul li a:visited{display: block;text-decoration: none;text-align:center;line-height: 92px;width: 110px;height: 70px;font-size:18px;color:#FFFFFF;}
.nav ul li a:hover,.nav ul li a:active{background-color: #404b56;
}
/*菜單第五個標簽欄*/
.But ul li{list-style: none;float: right;
}
.But ul li a:link,.But ul li a:visited{display:block;font-size:18px;text-decoration: none;margin-right: 96.5px;color:#FFFFFF;width: 115px;height: 25px;position: relative;top: -18px;
}
.But ul li a:hover,.But ul li a:active{background-color: #404b56;
}
/*!!!第二部分*/
.bodyone{margin: 0 auto;width: 1200px;height: 361px;background-color:#3b4e5f;
}
/*圖片*/
.logo1{position: relative;top:54px;float: left;margin-left: 120px;
}
.content1{position: absolute;top:130px;left: -1px;
}
.content2{position: absolute;top:271.8px;right:600px;
}
.content3{position: absolute;top:271.5px;right:260px;
}
/*第一個框中字體和標題*/
.title1{font-size:15px;color:white;position:relative;top: 16px;float:left;margin-left: 43px;
}
.character1{font-size: 15px;color:#999999;position: relative;top:25px;float:left;margin-left:19px;
}
/*第二個框中字體和標題*/
.title2{color:#FFFFFF;font-size: 15px;position:relative;top:16px;float:left;margin-left: 43px;}
.character2{font-size: 15px;color:#999999;position: relative;top:25px;float:left;margin-left:19px;
}
/*第三個框中字體和標題*/
.title3{color:#FFFFFF;font-size: 15px;position:relative;top:16px;float:left;margin-left: 43px;}
.character3{font-size: 15px;color:#999999;position: relative;top:25px;float:left;margin-left:19px;
}/*!!!第三部分*/
.bodytwo{margin: 0 auto;width: 1200px;height: 80px;background-color: #fdfdfd;
}
.logo2{position:relative;top:20px;float:left;margin-left:119px;
}
.button1:link,.button1:visited{position: absolute;text-decoration: none;margin-left: 225px;margin-top: 20px;padding: 10px 18px;font-weight: bold;font-size: 13px;color:white;background-color: #dd4747;border-radius:5px;    /*設置圓弧*/box-shadow: 0px 2px 2px #888888;border-style: solid;border-color:#bf3c3c;border-top-color: #e77c7c;
}
.S{color:#dddddd;font-weight: bold;font-size: 15px;position: relative;top:30px;right:-377px;
}
.button2:link,.button2:visited{position:absolute;text-decoration: none;margin-left: 409.5px;margin-top: 2.0px;padding: 10px 18px ;/*內置文字到邊框的距離*/font-weight: bold;font-size: 13px;color:white;background-color: #4398db;border-radius:5px;    /*設置圓弧*/box-shadow: 0px 2px 2px #888888;/*設置陰影*/border-style: solid;border-color:#4398db;border-top-color: #59a8e1;
}/*!!!第四部分*/
.bodythree{margin:0 auto;width:1200px;height:370px;background-color: #e7e9eb;
}
.T{font-weight: bold;font-size: 15px;color:#5a6066;postion:relative;float:left;line-height: 120px;margin-left: 120px;
}
.logo3{position:absolute;top:18px;float:left;line-height: 1560px;margin-left:120px;
}
.R{font-size: 14px;font-weight: bold;color:#999999;position:absolute;margin-top: 292px;margin-left: 120px;
}
.P{font-size: 15px;font-weight: bold;color:#5a6066;position: relative;float:right;line-height: 124px;margin-right: 570px;
}
.L{font-size: 15px;font-weight: bold;color:#999999;position:relative;float: right;line-height: 126px;margin-right: -623px;
}
.a1{width:400px;height:200px;overflow-y:hidden;  /*只出現水平滾動條*/position: relative;margin-top:-34px;float:right;margin-right: 320px;
}
.a2{width:400px;height:200px;position: relative;margin-top:-200px;float:right;margin-right: 159px;
}
.a3{width:400px;height:200px;position: relative;margin-top:-200px;float:right;margin-right: -2px;
}
.a4{width:400px;height:200px;position: relative;margin-top:-200.5px;float:right;margin-right: -162px;
}
.a5{width:400px;height:200px;position: relative;margin-top:-100.25px;float:right;margin-right: -162px;
}
.a6{width:400px;height:200px;position: relative;margin-top:-100px;float:right;margin-right: -240px;
}
.a7{width:400px;height:200px;position: relative;margin-top:-100px;float:right;margin-right: -240px;
}
.a8{width:400px;height:200px;position: relative;margin-top:-100px;float:right;margin-right: -238px;
}/*第五部分*/
.bodyfour{margin:0 auto;width:1200px;height:358px;background-color: #fdfdfd;
}
.W{font-size: 15px;font-weight: bold;color:#6f7479;line-height: 135px;position: relative;left: 120px;
}
.TF{position:relative;top:-44px;float:left;margin-left:120px;
}
.J{font-weight: bold;font-size: 15px;color:#5a6066;postion:relative;float:left;margin-left: 30px;margin-top: -46px;
}
.Q{font-weight: bold;font-size: 15px;color:#999999;postion:relative;float:right;margin-right: 780px;line-height: 150px;margin-top: -52.5px;
}
.logo4{position:absolute;top:980px;margin-left: 590px;
}
.B{position: absolute;font-size:15px;font-weight: bold;top:1056px;margin-left: 668px;color:#999999;
}
.A{position:absolute;top:980px;margin-left: 668px;color:#5a6066;font-size: 15px;font-weight: bold;
}
.logo5{position:absolute;top:1124px;margin-left: 590px;
}
.C{position: absolute;font-size:15px;font-weight: bold;top:1125px;color:#5a6066;margin-left: 668px;
}
.D{position: absolute;font-size:15px;font-weight: bold;top:1200px;color:#999999;margin-left: 668px;
}
/*第六部分*/
.bodyfive{margin: 0 auto;width:1200px;height:612px;background-color: #e5e7e9;
}
.K{position: absolute;font-size:15px;font-weight: bold;top:1320px;color:#a2a6a9;margin-left: 120px;
}
.logo6{position:absolute;top:1350px;margin-left: 120px;
}
.acm{position: absolute;font-size:15px;font-weight: bold;top:1610px;color:#373f47;margin-left: 120px;
}
.adb{position: absolute;font-size:15px;font-weight: bold;top:1635px;color:#5a6066;margin-left: 120px;
}
.RNG{position: absolute;font-size:15px;font-weight: bold;top:1665px;color:#454c52;margin-left: 120px;
}
.TL{position: absolute;font-size:15px;font-weight: bold;top:1750px;color:#5a6066;margin-left: 120px;
}
.button3:link,.button3:visited{position:absolute;text-decoration: none;margin-left: 405px;top: 1735px;padding: 12px 18px ;/*內置文字到邊框的距離*/font-weight: bold;font-size: 15px;color:white;background-color: #db4343;border-radius:5px;    /*設置圓弧*/box-shadow: 0px 2px 2px #888888;/*設置陰影*/border-style: solid;border-color:#bf3c3c;border-top-color: #e77c7c;
}
.FPX{position: absolute;font-size:15px;font-weight: bold;top:1350px;color:#373f47;margin-left: 770px;
}
.logo7{position:absolute;top:1350px;margin-left: 590px;
}
.flash{position: absolute;font-size:15px;font-weight: bold;top:1370px;color:#5a6066;margin-left: 770px;
}
.IG{position: absolute;font-size:15px;font-weight: bold;top:1405px;color:#454c52;margin-left: 770px;
}
.OK{position: absolute;font-size:15px;font-weight: bold;top:1480px;color:#5a6066;margin-left: 770px;
}
.JDG{color:#5a6066 ;position: absolute;top:1540px;margin-left: 590px;
}
.logo8{position:absolute;top:1585px;margin-left: 590px;
}
.CTF{position: absolute;font-size:15px;font-weight: bold;top:1585px;color:#373f47;margin-left: 770px;
}
.player{position: absolute;font-size:15px;font-weight: bold;top:1610px;color:#5a6066;margin-left: 770px;
}
.LPL{position: absolute;font-size:15px;font-weight: bold;top:1645px;color:#454c52;margin-left: 770px;
}
.LCK{position: absolute;font-size:15px;font-weight: bold;top:1715px;color:#5a6066;margin-left: 770px;
}
.JK{position: absolute;font-size:15px;font-weight: bold;top:1320px;color:#5a6066;margin-left: 990px;
}/*第七部分*/
.bodysix{margin: 0 auto;width:1200px;height:287px;background-color:#fbfbfb;
}
.end{position: absolute;font-weight: bold;top:2005px;margin-left: 775px;
}
.CF{position: absolute;font-size:18px;font-weight: bold;top:1925px;color:#373f47;margin-left: 120px;
}
.NZ{position: absolute;font-size:18px;font-weight: bold;top:1925px;color:#373f47;margin-left: 450px;
}
.JS{position: absolute;font-size:15px;font-weight: bold;top:1950px;color:#454c52;margin-left: 120px;
}
.button4:link,.button4:visited{position: absolute;text-decoration: none;margin-left: 120px;top: 2050px;padding: 11px 18px;font-weight: bold;font-size: 13px;color:white;background-color: #dd4747;border-radius:5px;    /*設置圓弧*/box-shadow: 0px 2px 2px #888888;border-style: solid;border-color:#bf3c3c;border-top-color: #e77c7c;
}
.LJ{position: absolute;font-size:15px;font-weight: bold;top:1950px;color:#454c52;margin-left: 450px;
}
.NS{position: absolute;font-size:15px;font-weight: bold;top:2010px;color:#454c52;margin-left: 450px;
}
.SF{position: absolute;font-size:15px;font-weight: bold;top:2055px;color:#454c52;margin-left: 450px;
}
.COOL{position: absolute;font-size:15px;font-weight: bold;top:2105px;color:#454c52;margin-left: 450px;
}
.beg{position: absolute;font-size:18px;font-weight: bold;top:1925px;color:#454c52;margin-left: 770px;
}
.last{position: absolute;font-size:15px;font-weight: bold;top:1956px;color:#454c52;margin-left: 770px;
}
.button5:link,.button5:visited{position:absolute;text-decoration: none;margin-left: 770px;top: 2058px;padding: 10px 20.5px ;/*內置文字到邊框的距離*/font-weight: bold;font-size: 13px;color:white;background-color: #4398db;border-radius:4px;    /*設置圓弧*/box-shadow: 0px 2px 2px #888888;/*設置陰影*/border-style: solid;border-color:#4398db;border-top-color: #59a8e1;
}/*第八部分*/
.bodyseven{margin:0 auto;width: 1200px;height: 86px;background-color:#f5f5f5;
}
.logo12{position:absolute;top:2175px;margin-left: 130px;
}
.logo13{position:absolute;top:2193px;margin-left: 768px;
}
.Z{position: absolute;font-size:15px;font-weight: bold;top:2208px;margin-left: 495px;
}

效果圖:
在這里插入圖片描述在這里插入圖片描述在這里插入圖片描述

點擊下載

點擊下載

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/530999.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/530999.shtml
英文地址,請注明出處:http://en.pswp.cn/news/530999.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

HTML+CSS+JS 表白代碼

文章目錄案例一 愛你到天昏地暗案例二 帶有音樂的表白代碼案例三 帶有圖片旋轉的表白案例源碼案例一 愛你到天昏地暗 <html> <style type"text/css"> <!-- .STYLE1 {font-size: medium} --> </style> <center><br><br>…

Linux常用命令與基本操作、填空題、簡答題

文章目錄基本知識點基本操作敘述什么是shell?重啟虛擬機網絡分區查看當前進程查看主機名重啟關機查看IP地址文件搜索掛載查看網絡配置linux系統中Vi的三種模式磁盤分區查看硬盤信息df&#xff0c;fdisk&#xff0c;lsblk區別進程用戶用戶信息查看用戶密碼信息修改密碼添加用戶…

Java中List、Map、Set三個接口,存取元素時,各有什么特點?

特點 List與Set都是單列元素的集合&#xff0c;它們有一個功共同的父接口Collection。 1.Set里面不允許有重復的元素&#xff0c; 存元素&#xff1a;add方法有一個boolean的返回值&#xff0c;當集合中沒有某個元素&#xff0c;此時add方法可成功加入該元素時&#xff0c;則…

客戶端與服務器(C/S架構與B/S架構)、AJax學習

文章目錄HTTP請求與服務器客戶端與服務器1.C/S架構與B/S架構2.web資源介紹3.資源訪問流程HTTP協議1.什么是協議&#xff1f;2.什么是HTTP協議3.HTTP組成部分4.請求的發送方式什么是Ajax技術Ajax可以做什么&#xff1f;偽造AjaxHTTP請求與服務器 客戶端與服務器 1.C/S架構與B/…

Mysql常用命令匯總

文章目錄基本命令連接數據庫查看數據庫使用數據庫查看表查看表結構顯示表的細節修改用戶密碼解決MySQL 5.5,出現亂碼問題聲明字符集DDL創建表查看表中的結構修改表添加表中的列刪除表中的列修改表中的列中屬性的數據類型修改表名修改表的字符集為gbk修改表中的列名刪除表&#…

SSH框架是什么?

文章目錄SSH框架StrutsSpringHibernateSSH框架 瀏覽器-Struts&#xff08;表示層&#xff09;-Spring&#xff08;業務層&#xff09;-Hibernate-數據庫 Struts Struts稱流行服務器&#xff0c;以前的流行服務器&#xff0c;通俗的來講就是完成mvc模型中“C”功能&#xff0c…

前端必會技巧

文章目錄點擊輸入框提示信息防止別人盜取視頻設置輸入邊框透明按鈕跳轉a標簽如何具有bootstra按鈕樣式formData的使用boostrap上傳樣式jq獲取input標簽的值jq獲取最近一個td標簽的值css設置幾個div中的圖片保持在一條水平線使div居中canvas 網頁背景 粒子鼠標跟隨磁力登錄界面添…

C/C++ 指針的深入理解

文章目錄內存結構地址就是指針為什么地址就是指針&#xff1f;指針&#xff1a;地址的外號&變量空間開辟于內存1.所開辟的空間字節數>1字節2.變量的每個字節都一個地址3.變量的第一個字節的地址代表整個變量的地址4.如何使用變量的指針找到整個變量空間&#xff1f;變量…

linux基礎必備

文章目錄Linux系統中常用目錄結構Linux下如何從普通用戶切換到root用戶Linux系統常用命令Linux系統文件中相關指令Linux查看開機自啟動服務Linux常見服務列表Linux關閉某些服務&#xff08;臨時關閉&#xff09;Linux關閉服務開機自啟動Linux中在屏幕輸入一句話Linux查看系統進…

Hadoop搭建集群中輸入hdfs namenode -format格式化節點時,提示:hdfs: command not found 解決辦法

分析原因&#xff1a; hadoop的安裝路徑沒有加入到當前路徑中 解決辦法&#xff1a; 方法1&#xff1a; 進入hadoop的安裝目錄&#xff0c;在執行hadoop命令時在前面加上&#xff1a;./bin ./sbin 方法2: 進入/etc/profile文件中添加hadoop的安裝路徑 sudo vim /etc/profile添…

Python 微信定向問好

from numpy import * import itchat from threading import Timerdef get_userName():itchat.auto_login(hotReloadTrue)frienditchat.search_friends(name"飛鳥信")print(friend)userName friend[0][UserName]return userNamedef send_msg():userName get_userNam…

Linux高級編程實驗(30個)

文章目錄1&#xff09;輸出Linux下的c也不是太難嘛&#xff01;在linux下編輯&#xff0c;編譯&#xff0c;運行2&#xff09;編寫一個簡單地c語言程序,根據輸入的兩個整數求平均值并且在終端輸出&#xff0c;通過gcc編譯器得到它的匯編程序文件。3&#xff09;編寫一個c語言程…

jsp中String path = request.getContextPath()的作用

<% String path request.getContextPath(); String basePath request.getScheme()"://"request.getServerName()":"request.getServerPort()path"/"; %>上述語句是用來拼接當前網頁的相對路徑 request.getContextPath()獲取web項目的根路…

登錄界面驗證碼的實現

文章目錄Javaweb實現驗證碼前端后臺Springboot添加驗證碼項目結構依賴控制類前端頁面效果圖Javaweb實現驗證碼 前端 添加樣式 <meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0, minimum-scale1.…

Javaweb MVC設計模式、Modle發展史、項目分層和三層架構

文章目錄MVC設計模式MVC的目的MVC舉例jspservletjavabean模式MVC的優點MVC的缺點Modle 發展史項目分層三層架構MVC設計模式 MVC模式&#xff08;Model-View-Controller&#xff09;是軟件工程中的一種軟件架構模式&#xff0c;把軟件系統分為三個基本部分&#xff1a;模型&…

HTML表格和HTML表單

HTML 表格 表格由 <table> 標簽來定義每個表格均有若干行&#xff08;由 <tr> 標簽定義&#xff09;&#xff0c;每行被分割為若干單元格&#xff08;由 <td> 標簽定義&#xff09; 字母 td 指表格數據&#xff08;table data&#xff09;&#xff0c;即數據…

Eclispe創建jsp文件,提示錯誤:“The import Xxx cannot be resolved“的解決方案

解決方案&#xff1a; a.(可能是jdk、tomcat版本問題) 右鍵項目->build path&#xff0c;將其中 報錯的 libary或lib 刪除后重新導入 b.清空各種緩存&#xff1a;右鍵項目->Clean tomcat... clean &#xff08;Project -clean或者 進tomcat目錄 刪除里面work的子目錄&a…

JSP訪問數據庫,Session對象和九大內置對象

文章目錄JSP訪問數據庫Session對象JSP九大內置對象JSP訪問數據庫 JSP就是在HTML中嵌套的java代碼&#xff0c;因此java代碼可以卸載JSP中&#xff08;<% … %>&#xff09; 導包操作&#xff1a; Java項目&#xff1a;1. Jar復制到工程中2.右鍵該Jar&#xff1a;build p…

HDFS學習 Java連接hadoop

文章目錄建立連接獲取hadoop下的文件信息編寫hadoop連接工具類建立連接獲取hadoop下的文件信息 import java.io.IOException; import java.net.URI; import java.net.URISyntaxException; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.fs.BlockLoc…

解決虛擬機沒有ens33網卡的問題

話不多說&#xff0c;直接操作 解決辦法 1.在終端中輸入: sudo vim /etc/network/interfaces進入interfaces文件后&#xff0c;然后輸入以下代碼&#xff0c;然后保存退出 auto ens33 iface ens33 inet dhcp 2.重啟虛擬機 輸入ifconfig命令&#xff0c;成功啟動ens33網卡