整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML+CSS+JS網頁設計與制作攝影類個人網頁

          以使用網頁三劍客html+css+js實現網頁設計與制作,頁面排版布局高端大氣。

          使用HTML+CSS頁面布局設計,HTML+CSS+JS網頁設計與制作攝影類個人網頁,這是一個優質的個人網頁制作。

          憑借簡約的設計風格、精湛的制作工藝,突破與創新的理念。

          個人網站、個人博客、個人介紹、攝影作品、圖片畫廊展示等個人網站的設計與制作。

          網站介紹

          1、網站程序:主要使用網頁三劍客html+css+javaScript實現網頁設計與制作,完成網站的功能設計。制作適用于任何瀏覽器或設備的精美網站。

          2、網站布局:主要采用浮動布局。兼容各大主流瀏覽器、顯示效果穩定。

          3、網站文件:網站系統文件種類包含html網頁結構文件、css網頁樣式文件、js網頁特效文件、images網頁圖片文件等。

          4、網站素材:搜集或制作適合網頁風格和尺寸的圖片,追求優質視覺體驗。

          5、網頁編輯:網頁作品代碼簡單,可使用任意HTML編輯軟件(如:Dreamweaver、HBuilder、Sublime 、Vscode 、Notepad++ 、Webstorm、Text 等任意編輯軟件進行編輯修改等操作)。

          6、網頁效果預覽:雙擊html文件或者拖拽html文件到瀏覽器打開,即可預覽當前網頁效果。


          網站亮點

          1、視覺設計:排版布局極簡設計,優質的視覺體驗等。

          2、動效交互:幻燈效果、入場動畫、按鈕點擊、視差功能、錨點功能、圖片畫廊功能、英文斷行等。

          <script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

          網站文件目錄

          (1)index.html:首頁html;

          (2)style:靜態資源目錄,存放css網頁樣式文件、js網頁特效文件、images網頁圖片文件等;

          其中:

          (1)css文件夾:存放網頁所有css樣式表文件文件;

          (2)images文件夾:存放網頁所有圖片資源文件;

          (3)js文件夾:存放網頁所有網頁特效文件;

          網站源碼

          全棧攻城獅-每日更新原創IT編程技術及日常實用視頻。

          主要內容:這是HTML課程的第五課,主要講解HTML的圖片和超鏈接。讓自己設計的網頁更加多元素。

          上節回顧

          在上節中主要講解了HTML的文字標簽和格式標簽。上篇請戳→→04程序員定要學HTML,字體段落標簽介紹,60秒搞定

          其實如果沒有記住也無所謂。畢竟這些標簽都是HTML中比較常用的,在以后的相關的案例中也會使用。此系列教程主要講解HTML從基礎到精通。自己能夠設計一個完整的前端網頁項目。

          程序員寫代碼


          圖片

          在HTML中添加圖片其實很簡單,就是添加一個img的標簽。

          圖片標簽的語法

          一般有src、alt、width、height四種屬性就夠用了。

          效果:

          圖片的顯示效果

          圖片路徑的寫法

          src表示的是圖片的路徑,這里面的值應該怎么寫呢?

          (1)html文件和圖片在相同一個文件夾下。

          HTML文件和圖片文件在相同的目錄下,可以直接書寫文件的名稱。

          寫文件名的寫法,如上面的HTML

          (2)圖片在HTML文件所在目錄的文件夾內:

          如圖:

          圖片文件在文件夾內

          此時需要加上文件夾名稱,并加上“/”表示下層目錄:

          下層目錄的圖片寫法

          (3)圖片文件在上層目錄

          如果圖片在HTML文件所在的上層目錄,則需要寫“..”表示向上一級。如圖:

          上層目錄


          超鏈接

          超鏈接就是可以鏈接到某個資源的東西,比如我們打開百度首頁搜索后,產生的就是超鏈接:

          這些藍字超鏈接

          這些藍色的文字標題,我們點擊之后可以跳轉到新的網站。這就是超鏈接。下面我們自己寫一個超鏈接:

          超鏈接的寫法

          超鏈接預覽


          超鏈接中的屬性

          超鏈接中的潮涌屬性包括:href(網頁地址)、title(說明描述)、target(打開網頁的位置)、name(名稱)。

          其中href支持帶有任何協議的連接。title是對超鏈接的說明。

          程序員

          target包括四個值:

          _blank

          在新的窗口打開連接

          _self

          在當前窗口打開超鏈接

          _parent

          在父窗口打開超鏈接,這個后面會說,不常用

          _top

          在整個窗口中打開被鏈接文檔。


          每天一個知識點,帶你邁向軟件編程大神,一起努力吧。

          最近再做一個需求,需要對網頁生成預覽圖,如下圖


          但是網頁千千萬,總不能一個個打開,截圖吧;于是想著能不能使用代碼來實現網頁的截圖。其實要實現這個功能,無非就是要么實現一個仿真瀏覽器,要么調用系統瀏覽器,再進行截圖操作。

          代碼實現

          1、啟用線程Thread

          •  void startPrintScreen(ScreenShotParam requestParam) { Thread thread = new Thread(new ParameterizedThreadStart(do_PrintScreen)); thread.SetApartmentState(ApartmentState.STA); thread.Start(requestParam); if (requestParam.Wait) { thread.Join(); FileInfo result = new FileInfo(requestParam.SavePath); long minSize = 1 * 1024;// 太小可能是空白圖,重抓 int maxRepeat = 2;  while ((!result.Exists || result.Length <= minSize) && maxRepeat > 0) { thread = new Thread(new ParameterizedThreadStart(do_PrintScreen)); thread.SetApartmentState(ApartmentState.STA); thread.Start(requestParam); thread.Join(); maxRepeat--; } } }

            2、模擬瀏覽器WebBrowser

            •  void do_PrintScreen(object param) { try { ScreenShotParam screenShotParam = (ScreenShotParam)param; string requestUrl = screenShotParam.Url; string savePath = screenShotParam.SavePath; WebBrowser wb = new WebBrowser(); wb.ScrollBarsEnabled = false; wb.ScriptErrorsSuppressed = true; wb.Navigate(requestUrl); logger.Debug("wb.Navigate"); DateTime startTime = DateTime.Now; TimeSpan waitTime = new TimeSpan(0, 0, 0, 10, 0);// 10 second while (wb.ReadyState != WebBrowserReadyState.Complete) { Application.DoEvents(); if (DateTime.Now - startTime > waitTime) { wb.Dispose(); logger.Debug("wb.Dispose() timeout"); return; } }
              wb.Width = screenShotParam.Left + screenShotParam.Width + screenShotParam.Left; // wb.Document.Body.ScrollRectangle.Width (避掉左右側的邊線); wb.Height = screenShotParam.Top + screenShotParam.Height; // wb.Document.Body.ScrollRectangle.Height; wb.ScrollBarsEnabled = false; wb.Document.Body.Style = "overflow:hidden";//hide scroll bar var doc = (wb.Document.DomDocument) as mshtml.IHTMLDocument2; var style = doc.createStyleSheet("", 0); style.cssText = @"img { border-style: none; }";
              Bitmap bitmap = new Bitmap(wb.Width, wb.Height); wb.DrawToBitmap(bitmap, new Rectangle(0, 0, wb.Width, wb.Height)); wb.Dispose(); logger.Debug("wb.Dispose()");
              bitmap = CutImage(bitmap, new Rectangle(screenShotParam.Left, screenShotParam.Top, screenShotParam.Width, screenShotParam.Height)); bool needResize = screenShotParam.Width > screenShotParam.ResizeMaxWidth || screenShotParam.Height > screenShotParam.ResizeMaxWidth; if (needResize) { double greaterLength = bitmap.Width > bitmap.Height ? bitmap.Width : bitmap.Height; double ratio = screenShotParam.ResizeMaxWidth / greaterLength; bitmap = Resize(bitmap, ratio); }
              bitmap.Save(savePath, System.Drawing.Imaging.ImageFormat.Gif); bitmap.Dispose(); logger.Debug("bitmap.Dispose();"); logger.Debug("finish");
              } catch (Exception ex) { logger.Info($"exception: {ex.Message}"); } }

              3、截圖操作

              •  private static Bitmap CutImage(Bitmap source, Rectangle section) { // An empty bitmap which will hold the cropped image Bitmap bmp = new Bitmap(section.Width, section.Height); //using (Bitmap bmp = new Bitmap(section.Width, section.Height)) { Graphics g = Graphics.FromImage(bmp);
                // Draw the given area (section) of the source image // at location 0,0 on the empty bitmap (bmp) g.DrawImage(source, 0, 0, section, GraphicsUnit.Pixel);
                return bmp; } }
                private static Bitmap Resize(Bitmap originImage, Double times) { int width = Convert.ToInt32(originImage.Width * times); int height = Convert.ToInt32(originImage.Height * times);
                return ResizeProcess(originImage, originImage.Width, originImage.Height, width, height); }

                完整代碼


                •  public static string ScreenShotAndSaveAmazonS3(string account, string locale, Guid rule_ID, Guid template_ID) {  //新的Template var url = string.Format("https://xxxx/public/previewtemplate?showTemplateName=0&locale={0}&inputTemplateId={1}&inputThemeId=&Account={2}", locale, template_ID, account ); 
                  var tempPath = Tools.GetAppSetting("TempPath");
                  //路徑準備 var userPath = AmazonS3.GetS3UploadDirectory(account, locale, AmazonS3.S3SubFolder.Template); var fileName = string.Format("{0}.gif", template_ID); var fullFilePath = Path.Combine(userPath.LocalDirectoryPath, fileName); logger.Debug("userPath: {0}, fileName: {1}, fullFilePath: {2}, url:{3}", userPath, fileName, fullFilePath, url); //開始截圖,並暫存在本機 var screen = new Screen(); screen.ScreenShot(url, fullFilePath);
                  //將截圖,儲存到 Amazon S3 //var previewImageUrl = AmazonS3.UploadFile(fullFilePath, userPath.RemotePath + fileName);
                  return string.Empty; }


                  • using System;using System.Collections.Generic;using System.Drawing;using System.IO;using System.Linq;using System.Text;using System.Threading;using System.Threading.Tasks;using System.Windows.Forms;
                    namespace PrintScreen.Common{ public class Screen { protected static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
                    public void ScreenShot(string url, string path , int width = 400, int height = 300 , int left = 50, int top = 50 , int resizeMaxWidth = 200, int wait = 1) { if (!string.IsOrEmpty(url) && !string.IsOrEmpty(path)) { ScreenShotParam requestParam = new ScreenShotParam { Url = url, SavePath = path, Width = width, Height = height, Left = left, Top = top, ResizeMaxWidth = resizeMaxWidth, Wait = wait != 0 }; startPrintScreen(requestParam); } }
                    void startPrintScreen(ScreenShotParam requestParam) { Thread thread = new Thread(new ParameterizedThreadStart(do_PrintScreen)); thread.SetApartmentState(ApartmentState.STA); thread.Start(requestParam); if (requestParam.Wait) { thread.Join(); FileInfo result = new FileInfo(requestParam.SavePath); long minSize = 1 * 1024;// 太小可能是空白圖,重抓 int maxRepeat = 2; while ((!result.Exists || result.Length <= minSize) && maxRepeat > 0) { thread = new Thread(new ParameterizedThreadStart(do_PrintScreen)); thread.SetApartmentState(ApartmentState.STA); thread.Start(requestParam); thread.Join(); maxRepeat--; } } }
                    void do_PrintScreen(object param) { try { ScreenShotParam screenShotParam = (ScreenShotParam)param; string requestUrl = screenShotParam.Url; string savePath = screenShotParam.SavePath; WebBrowser wb = new WebBrowser(); wb.ScrollBarsEnabled = false; wb.ScriptErrorsSuppressed = true; wb.Navigate(requestUrl); logger.Debug("wb.Navigate"); DateTime startTime = DateTime.Now; TimeSpan waitTime = new TimeSpan(0, 0, 0, 10, 0);// 10 second while (wb.ReadyState != WebBrowserReadyState.Complete) { Application.DoEvents(); if (DateTime.Now - startTime > waitTime) { wb.Dispose(); logger.Debug("wb.Dispose() timeout"); return; } }
                    wb.Width = screenShotParam.Left + screenShotParam.Width + screenShotParam.Left; // wb.Document.Body.ScrollRectangle.Width (避掉左右側的邊線); wb.Height = screenShotParam.Top + screenShotParam.Height; // wb.Document.Body.ScrollRectangle.Height; wb.ScrollBarsEnabled = false; wb.Document.Body.Style = "overflow:hidden";//hide scroll bar var doc = (wb.Document.DomDocument) as mshtml.IHTMLDocument2; var style = doc.createStyleSheet("", 0); style.cssText = @"img { border-style: none; }";
                    Bitmap bitmap = new Bitmap(wb.Width, wb.Height); wb.DrawToBitmap(bitmap, new Rectangle(0, 0, wb.Width, wb.Height)); wb.Dispose(); logger.Debug("wb.Dispose()");
                    bitmap = CutImage(bitmap, new Rectangle(screenShotParam.Left, screenShotParam.Top, screenShotParam.Width, screenShotParam.Height)); bool needResize = screenShotParam.Width > screenShotParam.ResizeMaxWidth || screenShotParam.Height > screenShotParam.ResizeMaxWidth; if (needResize) { double greaterLength = bitmap.Width > bitmap.Height ? bitmap.Width : bitmap.Height; double ratio = screenShotParam.ResizeMaxWidth / greaterLength; bitmap = Resize(bitmap, ratio); }
                    bitmap.Save(savePath, System.Drawing.Imaging.ImageFormat.Gif); bitmap.Dispose(); logger.Debug("bitmap.Dispose();"); logger.Debug("finish");
                    } catch (Exception ex) { logger.Info($"exception: {ex.Message}"); } }
                    private static Bitmap CutImage(Bitmap source, Rectangle section) { // An empty bitmap which will hold the cropped image Bitmap bmp = new Bitmap(section.Width, section.Height); //using (Bitmap bmp = new Bitmap(section.Width, section.Height)) { Graphics g = Graphics.FromImage(bmp);
                    // Draw the given area (section) of the source image // at location 0,0 on the empty bitmap (bmp) g.DrawImage(source, 0, 0, section, GraphicsUnit.Pixel);
                    return bmp; } }
                    private static Bitmap Resize(Bitmap originImage, Double times) { int width = Convert.ToInt32(originImage.Width * times); int height = Convert.ToInt32(originImage.Height * times);
                    return ResizeProcess(originImage, originImage.Width, originImage.Height, width, height); }
                    private static Bitmap ResizeProcess(Bitmap originImage, int oriwidth, int oriheight, int width, int height) { Bitmap resizedbitmap = new Bitmap(width, height); //using (Bitmap resizedbitmap = new Bitmap(width, height)) { Graphics g = Graphics.FromImage(resizedbitmap); g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High; g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality; g.Clear(Color.Transparent); g.DrawImage(originImage, new Rectangle(0, 0, width, height), new Rectangle(0, 0, oriwidth, oriheight), GraphicsUnit.Pixel); return resizedbitmap; } }
                    }
                    class ScreenShotParam { public string Url { get; set; } public string SavePath { get; set; } public int Width { get; set; } public int Height { get; set; } public int Left { get; set; } public int Top { get; set; } /// <summary> /// 長邊縮到指定長度 /// </summary> public int ResizeMaxWidth { get; set; } public bool Wait { get; set; } }
                    }

                    效果

                    完成,達到預期的效果。


          主站蜘蛛池模板: 日本在线视频一区二区三区| 中文字幕人妻AV一区二区| tom影院亚洲国产一区二区| 另类一区二区三区| 久久国产精品视频一区| 精品永久久福利一区二区| 水蜜桃av无码一区二区| 久久久99精品一区二区| 毛片一区二区三区无码| 亚洲一区二区成人| 丰满人妻一区二区三区免费视频| 无码精品蜜桃一区二区三区WW| 国产午夜精品一区二区三区嫩草 | 久久一区二区三区精华液使用方法 | 精品91一区二区三区| 国产成人无码一区二区三区在线| 精品无码成人片一区二区98| 国产精品一区不卡| 精品一区二区三区中文字幕 | 国产精品资源一区二区| 精品国产一区二区三区在线观看| 中文字幕日韩一区| 波霸影院一区二区| 亚洲国产视频一区| 国产伦精品一区二区免费| 97av麻豆蜜桃一区二区| 天天看高清无码一区二区三区| 午夜福利av无码一区二区| 日本一区二区三区四区视频| 色窝窝无码一区二区三区成人网站 | 国产精品亚洲一区二区三区在线| 亚洲大尺度无码无码专线一区| 大屁股熟女一区二区三区| 亚洲国产成人久久一区二区三区 | 成人日韩熟女高清视频一区| 波多野结衣AV一区二区三区中文 | 国产精品视频一区| 无码国产精品一区二区免费16| 伊人久久一区二区三区无码| 国产萌白酱在线一区二区| 成人免费视频一区二区|